BFC与合并浅析

BFC

BFC 全称 Block Formatting Context。
每个渲染区域用formatting context表示，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
在正常流中的盒子要么属于块级格式化上下文，要么属于内联格式化上下文

BFC特性&创建条件

特性

内部的Box会在垂直方向，从顶部开始一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box叠加。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

计算BFC的高度时，浮动元素也参与计算。
——《CSS之BFC详解》

创建条件

块格式化上下文由以下之一创建：

根元素或其它包含它的元素

浮动 (元素的float不是 none)

绝对定位的元素 (元素具有 position 为absolute或 fixed)

内联块 inline-blocks (元素具有display: inline-block)

表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)

表格标题 (元素具有 display: table->caption, HTML表格标题默认属性)

块元素具有overflow ，且值不是 visible

display:flow-root

——MDN - 块格式化上下文

BFC 可以用来做什么？

1. 解决margin重叠的问题

根据BFC的特性，同一个BFC下的两个相邻的盒子会出现垂直margin重叠的问题，这个问题会影响我们对页面布局的控制，通常我们可以为其中一个盒子添加一个父元素，并使其触发BFC，即可解决这个问题：

2. 浮动带来的布局问题

根据前面其他作者总结的BFC特性的第三条和第四条，我们知道在同一个BFC下即使有元素浮动，BFC下元素的最左边边缘总是会与包含它的盒子左边相接触，那么就会出现浮动元素遮盖了其他元素的情况。BFC还有一条重要特性：BFC的区域不会与float box 重叠。试想，在一个BFC，如果存在一个float元素，和一个div，浮动元素会遮盖住div，此时，如果给这个div构建一个新的BFC，由于BFC特性，内外不相互影响，此时div会被float元素挤开。

比如下面这个例子，绿色盒子会因为浮动遮盖住红色的盒子，但由于两个盒子都在同一个BFC（body元素）下，根据BFC特性，红色盒子会与包含块相接，此时只要让红色盒子触发BFC，我们为红色盒子添加一个触发BFC的条件overflow:hidden，此时红色盒子由于BFC的特性隔离开绿色，这样我们就可以通过float元素的方式实现两栏布局。

3. 清除浮动

这里就要说到我们常见的浮动元素引起的高度坍塌的问题。由于浮动特性，浮动元素会脱离父元素，我们是否可以通过触发BFC来解决高度坍塌的问题呢？

根据特性的第6条，在触发BFC后，这个盒子的高度将包含浮动元素的高度，在计算时，浮动元素会参与高度计算，我们可以理解为，当一个父元素中包含了浮动元素，而浮动元素超出了父元素，此时我们为父元素创建BFC，那么浮动元素就会包裹进这个BFC解决了父元素中高度塌陷的问题。

如下面的例子，div.parent包含了两个div.child，而两个div由于赋予了float:left使其浮动，导致了div.parent高度的坍塌，此时我们给div.parent添加一个overflow:hidden属性值，使div.parent触发BFC，由于BFC下的盒子会包含浮动元素的高度，因此盒子就被撑了起来，高度塌陷的问题也就得到了解决。

关于合并

在什么场景下会出现外边距合并？

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

当两个盒子的外边距均为正时，折叠外边距取外边距更大的那个；
当两个盒子的外边距均为负时，折叠外边距取外边距绝对值更大的那个；
当两个盒子的外边距一正一负时，折叠外边距取两个外边距值的和。

如何合并？

产生合并的必备条件：margin必须是邻接的!

而根据w3c规范，两个margin是邻接的必须满足以下条件：

1.必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
2.没有线盒，没有空隙（clearance），没有padding和border将他们分隔开
3.都属于垂直方向上相邻的外边距，可以是下面任意一种情况：
- 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
- height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
- 高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

以上的条件意味着下列的规则：

1.创建了新的BFC的元素（例如浮动元素或者overflow值为visible以外的元素）与它的子元素的外边距不会折叠
浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）
2.绝对定位元素不与任何元素的外边距产生折叠
inline-block元素不与任何元素的外边距产生折叠
3.一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。因此使用单边margin可以预防外边距合并现象。
4.一个常规文档流元素的margin-top 与其第一个常规文档流的子元素的margin-top产生折叠，条件为父元素不包含 padding 和 border ，子元素不包含 clearance。
5.一个 'height'为'auto'并且'min-height'为 '0'的常规文档流元素的margin-bottom会与其最后一个常规文档流子元素的margin-bottom 折叠，条件为父元素不包含 padding和 border，子元素的 margin-bottom不与包含clearance 的 margin-top 折叠。
6.一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其'height'为 0或'auto'，'min-height'为 '0'，其里面也不包含行盒(line box)，其自身的 margin-top和 margin-bottom 会折叠。

如何不让相邻元素外边距合并?

1.可以只设置单边边距。
2.让父级元素触发 BFC，就能使父级 margin 和当前元素的 margin 不重叠。

父子外边距合并的范例

示例

总结：

CSS之BFC详解中讲解的三个案例和上面讲解的这三种情况都是关于边距合并的方法。
但使用overflow:hidden或者其他方式或多或少会带来一些副作用和潜在的问题，可能在页面刚开始创建的时候这些问题不会完全显现，但是埋下祸根...

一般我们在构造页面的时候就尽量不用这些方式。
举个例子，对于margin重叠的问题，我们使用margin-top就可以很好的解决。

参考：