BFC的形成条件和特性分析

Posted 2020-09-09

初学CSS时，我们学到很多有意思的CSS规则，比如外边距塌陷，还有浮动元素的一些特性等，其实这些规则背后都是BFC这个东西在控制，下面我们来看下BFC到底是什么。

什么是BFC

BFC（Block formatting contexts），翻译过来就是块级格式化上下文，指的是一种上下文环境，我们暂且不管它为什么叫这么晦涩冗长的名字，先看看哪些情况能形成BFC，然后看看它有哪些特性，这样我们也就知道它是什么了。就像我们学习js的对象一样，了解一个对象的原型，以及它的属性方法，我们也就知道它是什么了。

如何形成BFC

根据W3C的定义：浮动元素，绝对定位元素，非块级盒子的块级容器（例如inline-blocks，table-cells，and table-captions），以及overflow属性值不是“ visible”（visible是overflow的默认值）的块级盒子（视口除外），这些元素就会为他们的内容创建一个BFC。

BFC的特点

在一个BFC中，垂直方向上，盒子是从包含块顶部开始一个挨着一个布局的，两个相邻的盒子的垂直距离是由margin属性决定的，在一个BFC中的两个相邻的块级盒子的垂直外边距会产生塌陷。
在一个BFC中，水平方向上，每个盒子的左边缘都会接触包含块的左边缘（从右向左的格式则相反）。除非出现浮动元素和其他元素相互作用的情况（当有浮动元素时，行盒可能因浮动元素而收缩，如果有盒子形成了新的BFC，那这个盒子也可能因浮动元素而变窄）。
这样我们终于知道为什么《精通CSS》里提到外边距塌陷时，为什么设置这么多的条件了：

1. 处于文档流中的块级元素

2. 垂直外边距直接相遇

其中第一个条件就是为了防止形成BFC，我们要注意的是BFC内部的子元素之间可以形成外边距塌陷，但BFC元素和其他块级元素是不能形成外边距塌陷的。

BFC的应用

BFC的应用场景比较多，在这里列一些我临时想到的

1. 清除元素之间的影响
   如果想让一个元素不受另一个元素的影响，可以把其中一个元素放到BFC环境中。
   eg：我们都知道文本会围绕着浮动元素布局，如下图所示

   <style type="text/css">
       .out{        width: 200px;        height: 200px;        border: 1px solid blue;
       }    .f{        width: 50px;        height: 50px;        background: red;        float: left;
       }</style>

   <div class="out">
   <div class="f"></div>我是文本我是文本我是文本我是文本我是文本我是文本我是文本
   我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</div>

如果我们不想让文本环绕，只想让文本位于右侧，怎么处理呢？
只需要在文本外套一层元素，并且把这个元素变成BFC，这样文本就不会受到浮动元素的影响了。我这里通过修改overflow属性使文本所在元素形成一个BFC。

<style type="text/css">
        .out{            width: 200px;            height: 200px;            border: 1px solid blue;
        }        .f{            width: 50px;            height: 50px;            background: red;            float: left;
        }        .inner{            overflow: auto;
        }    </style>

<div class="out">
    <div class="f"></div><div class="inner">我是文本我是文本我是文本我是文本我是文本我是文本我是文本
我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</div></div>

防止块级元素之间外边距塌陷的方法之一就是利用刚才说的第一个条件，也是同样的原理，形成一个BFC，在这里就不再说了。

1. 清除内部浮动元素对父级元素的影响
   eg：

   <style type="text/css">
       .out{        border: 1px solid blue;
       }    .f{        width: 50px;        height: 50px;        background: red;        float: left;
       }</style>

   <div class="out">
   <div class="f"></div>
   </div>

   效果图：

如果想让外部元素包含浮动元素，只需将外部元素设置为BFC

<style type="text/css">
        .out{            overflow: auto;            border: 1px solid blue;
        }        .f{            width: 50px;            height: 50px;            background: red;            float: left;
        }    </style>

效果图：

1. 创建自适应布局
   如果我们想创建一个两列布局，其中左侧宽度不定，右侧宽度自适应占用剩下的空间，有一种方法就是利用浮动元素和BFC元素的相互作用实现的。

   <style type="text/css">html,body{        width: 100%;        height: 100%;
   }    .out{        background: blue;        width: 100%;        height: 100%;
       }    .f{        float: left;        margin-right: 20px;        height: 100%;        background: red;
       }    .r{        overflow: auto;        height: 100%;        background: yellow;
       }</style>

   <div class="out">
   <div class="f">浮动元素</div>
   <div class="r"></div>
   </div>

   效果图：

总结

BFC是很多CSS规范背后的原理，所以有必要搞清楚BFC。