CSS BFC

BFC布局规则

1:内部的BOX会在垂直方向一个接一个的放置

2:BOX垂直方向的距离是由Margin决定   属于同一个BFC的两个相邻的BOX的margin会发生重叠

3:每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

4:BFC的区域不会于float box重叠

5:BFC就是页面上的一个隔离的独立容器   容器里面的子元素不会影响到外面的元素  反之也是如此

6:计算BFC的高度时   浮动元素也参与计算

 

如何创建BFC

1:float的值不是none

2:position的值不是static和relative

3:overflow的值不是visiable

4:display的值是  inline-block   table-cell  flex  table-caption  inline-flex

5:body 根元素

 

BFC 特性及应用

同一个 BFC 下外边距会发生折叠