BFC的形成条件和特性分析

初学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：我们都知道文本会围绕着浮动元素布局，如下图所示

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