8. 浮动、定位、BFC及边距合并

浮动

特征：

浮动的元素会脱离文档流，向左或者向右移动至包含块内边缘或者同样浮动的元素外边缘。
文档流中的普通元素察觉不到浮动元素，但是其文本内容却能察觉到浮动元素，呈现出围绕浮动元素排列的表现方式。

影响：

• 对父容器的影响：如果父容器的子元素都是浮动元素，那么父容器会失去高度，在浮动元素之外。视觉上，父容器没有包含住浮动的子元素。
• 其它浮动元素的影响：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
• 普通元素的影响：普通元素会视浮动元素不见，占据浮动元素原有的位置，但会被浮动元素遮罩。
• 对文字的影响：文字会感知到浮动元素的存在，会留出空间，形成环绕效果。

清除浮动：

清除浮动是指消除浮动元素对其他元素因浮动元素造成的高度塌陷的问题。

清除浮动的方法：

1. 在父元素的子元素最后添加一个空div，并对其设置样式：clear:both;
   由于在子元素最后添加了空div，并清除了浮动，因此父容器被撑开，实现了在视觉上包围浮动元素的效果。
2. 利用BFC来清除浮动。
   因为BFC可以包含浮动，因此可以让父元素生成一个新的BFC从而包围浮动的子元素。
   可以对父元素设定以下样式之一生成新BFC。

float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;

3. 结合CSS特性的通用清除浮动方案，其本质还是第1种方法。

.clearfix{*zoom: 1;}
.clearfix:after{content: ””; display: block; clear: both;}

定位

• inherit：继承父元素定位属性。
• static：默认值，没有定位，元素出现在正常的文档流中。参考点是文档流中的位置。
• relative：相对定位。相对于元素本身正常位置进行定位，通过top、bottom、left、right属性来设置偏移量。使用场景：为绝对定位设定参照物或对元素自身位置进行局部调整。
• absolute：绝对定位。相对于static定位以外的第一个祖先元素进行定位，若都没有发现则以html标签为参考进行定位。使用场景：当想让元素参照特定参照物进行定位时使用。
• fixed：固定定位。生成绝对定位元素，相对于viewport进行定位。
• sticky：对象在常态时遵循普通流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。兼容性不佳，不常用。

</br>

z-index

概念：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index 仅能在定位元素上奏效。

当页面上出现多个由绝对定位（position:absolute）或固定定位（position:fixed）所产生的浮动层时，必然就会产生一个问题，就是当这些层的位置产生重合时，谁在谁的上面呢？或者说谁看得见、谁看不见呢？这时候就可以通过设置z-index的值来解决，这个值较大的就在上面，较小的在下面。

z-index的意思就是在z轴的顺序，如果说网页是由x轴和y轴所决定的一个平面，那么z轴就是垂直于屏幕的一条虚拟坐标轴，浮动层就在这个坐标轴上，那么它们的顺序号就决定了谁上谁下了。

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

• position:relative是相对于自身在文档流的位置发生偏移，原本所占有的位置不会被其他元素占据，外形发生了移动但本身的位置是不动的；
• 而负margin则文档流的位置会发生偏移，会让后面的元素也发生位置的偏移。

</br>

BFC

BFC直译为"块级格式化上下文"。它是一块独立的区域，容器里面的子元素不会影响到外面的元素。

要促发BFC的生成，则满足以下其中一个条件：

1. float属性不为none；
2. position为absolute或fixed；
3. display为inline-block, table-cell, table-caption, flex, inline-flex；
4. overflow不为visible。

BFC可以清除内部浮动：BFC可以包含浮动，让父容器生成新的BFC可以使父容器在视觉上包围了浮动的子元素，因而清除了浮动。例子：清除浮动demo

防止margin重叠：属于同一个BFC的两个相邻Box的margin会发生重叠，我们可以把其中一个元素生成新的BFC，这样它们的边距就不会合并。
</br>

外边距合并

外边距合并指当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当两个外边距都为负数时，取其绝对值的较大者，当两个外边距为一正一负时，取两者的和。

父子外边距合并的需要满足父元素没有border和paddinng隔开。
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框、绝对定位框（absolute或fixed）之间的外边距不会合并。

具体场景如下：

• 当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，见图：

  
  

• 当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界也发生叠加，见图：

  
  

• 尽管初看上去有点儿奇怪，但是边界甚至可以与本身发生叠加。假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加，见图：

  
  

• 如果这个边界碰到另一个元素的边界，它还会发生叠加，见图：

  
  

防止让相邻元素外边距合并的方法：

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框、绝对定位框（absolute或fixed）之间的外边距不会合并。
所以把相邻元素的其中一个元素形成一个BFC，BFC就会阻止垂直外边距(margin-top,margin-bottom)的折叠。

防止父子外边距合并的方法：

1. 外层padding；
2. 透明边框border:1pxsolidtransparent;
3. 绝对定位postion:absolute:
4. 外层DIV overflow:hidden;
5. 内层DIV　加display:inline-block(触发BFC);

例子如下：
父子外边距合并
padding解决
boroder解决
overflow解决
绝对定位解决