CSS进阶（10）—— 深入理解BFC结界

BFC是block formatting context的缩写，中文名为“块级格式化上下文”。前面也多次提到了这个听起来十分拗口的属性，那么CSS设计这个属性的初衷是什么呢？

记住一句话：拥有BFC特性的元素会形成类似“结界”的封闭内部空间，该元素内部的元素以及该元素本身都不会影响外部元素的表现。 要理解这句话，还得通过一些例子来证明，在举例证明之前，我们必须得知道一件事，就是CSS规定了哪些属性可以生成BFC属性，常见的情况如下：

• float不为none的元素。
• overflow的值为auto，scroll或hidden。
• display的值为inline-block，table-cell或table-caption。
• position的值不为relative和static

在知道了哪些元素拥有BFC属性后，我们就可以愉快的测试了。

由于一个元素拥有BFC，因此其内部子元素再怎么变都不能影响到外面的元素，这句话仿佛在哪里见过？没错，读过上一章的小伙伴应该还记得float元素导致父容器高度坍塌的问题，因此如果float元素的父容器拥有BFC特性会发生什么呢？实践出真知，试一试不就知道了吗。

<!-- BFC -->
<div style="display: inline-block;">
    <div style="float: left;">我的父元素有BFC,我是左浮动</div>
    <div style="float: right;">我的父元素有BFC,我是右浮动</div>
</div>
复制代码

在本例中，我们给父容器添加了inline-block属性，块状格式化上下文之后，结果如下图所示:

可以看到，父容器最终没有高度坍塌，而是实实在在有了自己的高度，因此BFC元素可以用来清除浮动的影响，如果不清除，由于父容器高度坍塌必然会影响到其他元素的定位和布局，这显然违背了BFC子元素不会影响外部元素的规定。除了浮动，还有什么CSS属性会影响到外部元素的布局呢？在深入理解margin一文中，我们探讨了margin叠压的情况及计算方式，margin叠压的产生实际上是两个拥有margin的元素互相作用的结果，这和BFC元素不会影响外部元素的原理也是违背的，因此拥有BFC属性的元素绝不会产生margin叠压。眼见为实。

<!-- BFC -->
<div style="margin: 20px">BFC元素和我没法margin叠压</div>
<div style="display: inline-block;margin:20px">
    <div style="float: left;">我的父元素有BFC,我是左浮动</div>
    <div style="float: right;">我的父元素有BFC,我是右浮动</div>
</div>
复制代码

2.BFC与流体布局

BFC的结界特性并不是为了去除margin叠压或者是清除float的影响，而是实现更健壮，更智能的自适应布局。

在上一章中，我们实现了文字的环绕效果，那么先来做一个思考题，如何实现下图的效果。

在上图中我们实现文字与图片相敬如宾的效果，有很多种做法可以实现如图的效果，这里我提供两种方法，对比一下各自的优缺点。第一种，优先利用浮动元素高度坍塌的特性，用margin实现图文分离。

<!--利用高度坍塌的特性 -->
<div style="width:200px">
    <div style="float: left;">
    	<img width="100" height="100" src="../小和尚.jpg">
    </div>
    <p style="margin-left: 100px">
    	我不想实现文字环绕，因此需要多一些文字看一下效果，
    	我不想实现文字环绕，因此需要多一些文字看一下效果
    </p>
</div>
复制代码

第二种，利用BFC的结界，彻底消除浮动元素的影响。（我们给文字元素加BFC属性，不跟float元素一块玩了）

<!-- BFC与流体布局 -->
<div style="width:200px">
    <div style="float: left;">
        <img width="100" height="100" src="../小和尚.jpg">
    </div>
    <p style="overflow: hidden;">
        我不想实现文字环绕，所以我不想和float有瓜葛
        我不想实现文字环绕，所以我不想和float有瓜葛
    </p>
</div>
复制代码

这里我们利用了BFC的表现原则，具有BFC特性的元素的子元素不会受到外部元素的影响，也不会影响外部元素，于是这里的文字为了不和浮动元素产生交集，顺着浮动边缘形成了自己的封闭上下文。这种方法比margin自适应更加智能，这里我们不管图片的尺寸是多少（不超过父容器），都能实现这种两栏布局。

3.了解BFC能帮助我们做什么

BFC拥有如此强大的自适应特性却鲜为人知，这并不是前端 程序员 的错，而是绝大部分触发BFC属性自身有一些奇怪的特性，导致兼顾自身特性和BFC特性的自适应布局变得非常困难。

（1）就拿float来说，float元素本身BFC化，然而浮动元素又具有破坏性和包裹性，失去了元素的的流体自适应性，因此我们反而更注重使用float的自身特性实现一些布局，而忽略了其BFC的特性。

（2）作为float的好兄弟postion：absolute，就更不用说了，脱离文档流都不晓得到哪里去了，要实现所谓的自适应布局几乎是做白日梦(fixed同理)。

（3）table-cell和table-row和table相关，现在的布局中已经很少用了，甚至没多少人愿意花时间了解table的许多特殊机制（包括本人），因此table属性几乎已经快被“弃用”了。

（4）display：inline-block是CSS世界最伟大的发明之一，但他也同样会改变元素本身的一些特性，如块级元素申明inline-block后就失去了本身的水平流特性，使得元素尺寸包裹收缩，因此只能说有用武之地，但具体在哪里用，需要结合实际情况。

（5）overflow:hidden。在众多申明BFC特性的属性里，overflow:hidden是最不需要关心自身机制的一个属性了，你甚至可以给所有的元素申明overflow:auto（当然这只是一句玩笑话，千万别这么做）。说这句话的目的是为了突出，不管是什么元素，申明了overflow:hidden后，其自身特性还能完美保留，尤其是块级元素的水平流特性，就是我们要保留的重点对象。

因此想要清除浮动影响的最佳属性不是clear，而是overflow。 我们也无需刻意的利用BFC进行自适应布局只要注意到BFC结界的特性会如何去影响布局即可。

本章内容到此为止，既然提到了overflow，下一章我们就来了解一下overflow相关的知识。有兴趣可继续关注后续内容~

不忘初心，方得始终

喜欢博主的童鞋可以扫描二维码加博主好友~ 也可以扫中间二维码入驻博主的粉丝群（708637831）~当然你也可以扫描二维码打赏并直接包养帅气的博主一枚。