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

   <style type="text/css"> .out{ width: 200px; height: 200px; border: 1px solid blue;
       } .f
           
   		
   
           		
   网友评论
        		
   				
   
   			
   			
   			
   		
   		
   		
       	
       	
           	
   
           		
   更多精彩分享
           		
   
           			
           		
           			
   	        		
   	        		学习是年轻人改变自己的最好方式