BFC是什么?从没有认识到最初的认识是一个关键且困难的过程。网上的很多文章都会写道:BFC 是一个环境。这样的写法让人看了就头疼:我们在HTML和CSS中好像从没接触过环境这个概念。

下面不妨让我用通俗的方式解释一下BFC的概念:BFC可以简单的理解为某个元素的一个CSS属性,只不过这个属性不能被开发者显式的修改,拥有这个属性的元素对内部元素和外部元素会表现出一些特性(后面会讲到),这就是BFC。

BFC 的特性

BFC 对布局的影响主要体现在对 float 和 margin 两个属性的处理。在我看来,BFC 让 float 和 margin 这两个属性的表现更加符合我们的直觉。

BFC 包裹浮动元素

BFC的特性之一就是其高度的计算会包括所有浮动元素的高度,所以使用BFC可以包裹浮动元素,达到清除浮动的目的。

<div style="overflow: hidden; background: #AAA;">
<div style="float: left; width: 100px; height: 100px; background: #000;">
</div>
</div>

overflow: hidden可以触发一个元素的BFC属性,使该元素成为一个BFC容器,从而使该元素对内部元素及外部元素表现出BFC的特性

运行代码可以看到,我们虽然没有进行任何清除浮动的工作,外层 div 还是包裹住了内层浮动的 div,没有造成高度塌陷的情况。

另外,将外层div同时设为浮动来清除内层浮动的方法,本质上也是应用了BFC的特性,因为将一个元素设为浮动也会触发该元素的BFC属性,使外层元素成为一个BFC容器。

BFC 包裹 margin(阻止外边距折叠)

BFC 对内部元素的另一个特性就是可以取消 margin 折叠(margin collapse)。这个特性我喜欢更形象的称之为包裹 margin。

<div style="background: #AAA;">
<div style="width: 100px; height: 100px; margin-top: 50px; background: #000;">
</div>
</div>

运行代码可以看到,内层 div 的 margin 并没有将内层 div 相对于外层 div 向下推移,而是将内外两层 div 整体向下推移:

而我们想要的结果是这样的:

内外两层 div 被整体向下推移的原因就是 margin 折叠,关于 margin 折叠的相关介绍可以参见这里。CSS 中父子元素的 margin 只要相邻,也会发生折叠,CSS 规范虽是如此,但很多时候这并不符合我们的预期:我们希望外部 div 能够包裹内部 div 的 margin,避免形成折叠,这时我们就可以使用 BFC。

<div style="overflow:hidden; background:#AAA;">
<div style="width:100px; height:100px; margin-top:50px; background:#000;">
</div>
</div>

我们将外层 div 设置为一个 BFC 容器,由于 margin 折叠只会发生在同一个 BFC 中的元素之间,而不同 BFC 的元素之间以及元素及其所属的 BFC 之间不会发生 margin 折叠,因此就可以实现对 margin 的包裹。

BFC 可以阻止元素被浮动元素覆盖,阻止文本在浮动元素周围自动换行

BFC 对外部元素的独立性在于 BFC元素不会与浮动元素叠加。例如:

<div style="float: left; width: 100px; height: 100px; background: #000;">
</div>
<div style="height: 200px; background: #AAA;">
</div>


可以看到,浮动的 div 由于脱离了文档流,导致正常的 div 左上角被覆盖。为了避免这种情况,我们使第二个 div 成为 BFC 容器:

<div style="float: left; width: 100px; height: 100px; background: #000;">
</div>
<div style="overflow: hidden; height: 200px; background: #AAA;">
</div>


当第二个 div 成为 BFC 容器后,其不会再受到浮动 div 的影响,布局相对独立。这样的技巧经常用作两栏或三栏自适应布局。

BFC的触发条件

BFC 可以被理解为元素的一个属性,但是这个属性无法被显式的设置,那么如何触发一个元素的 BFC 属性呢?上面的代码中使用的 overflow:hidden 就是触发 BFC 的一种方式,除了设置 overflow:hidden,下面的 CSS 属性设置都可以触发 BFC:

  • 父级元素,浮动元素:float 设置为除 none 之外的取值;
  • 父级元素的overflow 设置为除 visible 之外的取值;
  • 父级元素,绝对定位元素:position 设置为absolute 或 fixed;
  • 父级元素,display 设置为 table-cell、table-caption、inline-block 中的任一取值;

BFC 与 Layout

IE作为浏览器中的奇葩,当然不可能按部就班的支持BFC标准,于是乎IE中有了Layout这个东西。Layout和BFC基本是等价的,为了处理IE的兼容性,在需要触发BFC时,我们除了需要用上面的CSS属性来触发BFC,还需要针对 IE 浏览器使用zoom: 1来触发IE浏览器的Layout。

参考链接:理解CSS中BFC

转载请标注原文地址