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

本章继续来探讨CSS世界的流破坏和流保护，延续的是上一章float的内容，在上一章中咱们已经知道了clear属性并非真正的清除浮动，本章将继续深刻探索，引入BFC结界的概念。若是对浮动和清浮动属性还不太了解的同窗强烈推荐先观看上一章的内容——那些年骗过你的float和“清浮动”。下面正式开始本章的内容。

1.CSS的结界——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）~固然你也能够扫描二维码打赏并直接包养帅气的博主一枚。