CSS - 探究 BFC

[renjie-run]

什么是 BFC

官方定义

BFC(Block formatting context)直译为“块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC 是一个独立的布局环境，其中的元素布局不受外界的影响，并且在一个 BFC 中，块级元素与行内元素都会垂直的沿着其父元素的边框排列。

BFC 的布局规则

• 内部的盒子都会在垂直方向一个一个的排列。
• 各个元素的垂直方向的距离由 margin 决定，同一个 BFC 下的两个相邻元素会发生外边距重叠的现象。
• BFC 区域不会与浮动的盒子重叠。
• BFC 就是页面上的一个隔离的独立容器，容器里的元素不会影响到外面的元素，反之亦然。
• 计算 BFC 的高度时，内部浮动的元素也会参与运算。
• 在 BFC 中，每一个盒子的左外边缘会触碰到容器的左边缘，对于从右到左的格式来说，则触碰到右边缘。即使在浮动里也是这样的（尽管一个盒子的 line boxes 会因为浮动而收缩），除非这个盒子的内部创建了一个新的 BFC（由于浮动，在这种情况下盒子本身将会变得更窄）。

如何创建一个 BFC

• float 的值非 none。
• position 的值非 static 或 relative。
• display 的值为：inline-block、table-cell、flex、inline-flex、table-caption。
• overflow 的值非 visible。

BFC 应用场景

或者说是使用 BFC 可以解决哪些棘手的问题。根据 BFC 的布局规则，就能发现它的用途。

防止外边距重叠

对发生外边距重叠的两个相邻元素构建一个 BFC 即可。

防止高度塌陷

在一个容器中，如果子元素进行了浮动处理，那么由于该子元素脱离了文档流，那么这个容器的高度没有能撑起高度的子元素就会发生塌陷现象。 因为计算 BFC 的高度时，内部浮动的元素也会参与计算，那么此时可以使用 BFC 来解决该问题。

防止文字环绕

这里不讲文字环绕如何产生的了。 因为在 BFC 中，每一个盒子的左外边缘会触碰到容器，所以此时如果对环绕的文字构建一个 BFC 就能解决这个问题了。