BFC的形成条件和特性分析-创新互联

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

创新互联是专业的潘集网站建设公司，潘集接单;提供成都做网站、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行潘集网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

什么是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》里提到外边距塌陷时，为什么设置这么多的条件了：

处于文档流中的块级元素
垂直外边距直接相遇

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

BFC的应用

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

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


    .out{        width: 200px;        height: 200px;        border: 1px solid blue;
    }    .f{        width: 50px;        height: 50px;        background: red;        float: left;
    }

我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本

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


        .out{            width: 200px;            height: 200px;            border: 1px solid blue;
        }        .f{            width: 50px;            height: 50px;            background: red;            float: left;
        }        .inner{            overflow: auto;
        }

.out{ border: 1px solid blue; } .f{ width: 50px; height: 50px; background: red; float: left; }

.out{ overflow: auto; border: 1px solid blue; } .f{ width: 50px; height: 50px; background: red; float: left; }

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; }

重庆分公司，新征程启航

BFC的形成条件和特性分析-创新互联

什么是BFC

如何形成BFC

BFC的特点

BFC的应用

总结

其他资讯