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

最新推荐文章于 2022-07-03 22:49:24 发布

转载最新推荐文章于 2022-07-03 22:49:24 发布 · 182 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5d0adf8af265da1b7402023a

本章继续来探讨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）~当然你也可以扫描二维码打赏并直接包养帅气的博主一枚。

转载于:https://juejin.im/post/5d0adf8af265da1b7402023a