CSS浮动与定位

问答

1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

• 特征:

1. 浮动模型是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它的外边缘碰到包含框或者另一个浮动元素框的边缘
2. 浮动元素不在文档的普通流中,文档的普通流中的元素表现的就像浮动元素不存在一样
3. 如果包含块太窄无法容纳水平排列的浮动元素,那么其他浮动快递向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被"卡住",即向下移动时,它会优先向着有足够空间的区域移动
4. 浮动会让元素脱离普通流,如果浮动元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是元素的文本内容会受到浮动元素的影响,会移动以留出空间;用术语说就是浮动元素旁边的行框(文字行或其他行组成的类似边框的框)被缩短,从而给浮动元素留出空间,因而行框围绕浮动框

• 影响:

1. 对父容器: 父容器下的子元素如果都出现浮动,会造成父元素容器高度塌陷的问题;但是浮动还是以父容器的内边框为界,并且会出现边框合并的现象
2. 对其他浮动元素: 浮动的框可以左右移动(根据float值而定),直到他的外边缘碰到包含框或另一个浮动元素的框边缘
3. 对普通元素: 浮动会让元素脱离普通流,如果浮动的元素后面有普通元素,name这个元素的框会表现的像浮动元素没有存在一样
4. 对文本影响: 普通元素会忽略浮动元素,但文本内容会移动,给浮动元素留出空间,会有文本行框围绕浮动元素的现象

2. 清除浮动指什么? 如何清除浮动? 两种以上方法

• 清除浮动: 是指清除所需要的元素受到浮动元素的影响;主要为了解决浮动元素父元素的高度塌陷问题
• 方法一: 可以在浮动元素末尾加一个空内容带clear样式属性的标签
• 方法二: 通用清理浮动方案

.clearfix{
  *zoom: 1;
}
.clearfix:after{
  content: "";
  display: block;
  clear: left;
}

• 方法三: 触发BFC清除浮动

3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

CSS3中有三种基本定位机制,即普通流,相对定位以及绝对定位;通过position可以选择4种定位方式

• 普通流
  static 普通流是默认定位方式,在普通流中元素框的位置由元素在HTML中的位置决定,元素position属性为static或继承来static时就会按照普通流定位,最常见的定位方式
• 相对定位比较简单,对应position属性的relative值,如果对一个元素进行相对定位,它将出现在他所在的位置上,通过设置垂直或水平位置,元素相对于自己移动;在使用相对定位时,不论元素是否移动,元素在文档流中占据原来的空间,只是表现出来的位置会改变
• 绝对定位与固定定位
  相对定位可以看作特殊的普通流定位,元素位置是相对于它在普通流中的位置发生变化;而绝对定位使元素的位置与文档流无关,也不占用文档流空间,普通流中的元素布局就像绝对定位元素不存在一样;绝对定位的元素位置是相对于距离最近的非static祖先元素位置决定的,如果元素没有已定位的祖先元素,那么它的位置就相当于初始包含块html的内边框来定位;因为决定定位与文档流无关,所以绝对定位的元素可以覆盖页面上的其他元素
• fixed: 绝对定位方式;元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身,是相对于浏览器窗口进行定位
• sticky: CSS3新属性,类似于position: relative和position: absolute的合体,在目标区域在屏幕中可见;兼容性差,可通过Js实现

4. z-index 有什么作用? 如何使用?

• z-index指定元素的堆叠顺序;因为绝对定位与文档流无关,所以绝对定位的元素可以覆盖页面上的其他元素,可以通过z-index属性控制叠放顺序,z-index越高,元素位置越靠上;
• z-index只能在定位元素上奏效;
• 取值:
  auto 默认,堆叠顺序与父元素相同
  number 设置元素的堆叠顺序
  inherit 规定应从父元素继承z-index属性的值

5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

• position: relative 在使用相对定位时,无论元素是否移动,元素在文档流中占据原来的空间,只是表现出来的位置会改变,而对元素的空间没有影响
• margin偏移,会指定元素移动,但由于处于普通流中,会对后面元素的位置造成影响

6. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

• BFC(block formatting context)块级格式化上下文: 是一个独立的渲染区域,只有Block-level box参与,它规定了内部的block-level box如何布局,并且与这个区域外部毫不相关浮动元素和绝对定位元素,非块级盒子的块级容器(如 inlin-block, table-cells, table-captions),以及overflow值不为visiable的块级盒子,都会为他们的内容创建BFC;在BFC中,盒子从顶端开始垂直的一个接一个地排列,两个盒子之间的垂直间隙是由他们的margin决定的;在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠
• 当元素设置以下属性就可生成BFC:
  float: left \ right(浮动元素)
  overflow: hidden \ auto \ scroll(overflow值不为visable)
  display: table-cell \ table-caption \ inline-block(非块级元素)
  position: absolute \ fixed(绝对定位元素)
• 作用:

1. BFC会组织垂直外边距合并,只要把父元素设为BFC就可以了,这样子元素margin就不会和父元素margin合并
   示例1
2. BFC不会重叠浮动元素
   示例2
3. BFC可以包含浮动
   示例3

7. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

• 只有同属一个BFC时,两个元素才有可能发生垂直margin的合并,包括相邻元素,嵌套元素,只要他们之间没有阻挡(边框,非空内容,内边距等)就会发生margin合并
• 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
  若两者都为正外边距以最大的外边距为准；
  若存在负边距， 合并后的外边距为最大正外边距减去绝对值最大的负边距；
  若无正外边距，则用0减去绝对值最大负边距
• 要解决margin重叠问题，只要让他们不再一个BFC就行了
• 父子外边距合并,只要将父元素生成BFC,就解决了外边距合并

代码

地址1
地址2
地址3
地址4