深入理解BFC

要想理解BFC,首先理解FC是什么:

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

而BFC,则是块级格式化上下文;就是说无论子box怎么搞,除了绝对流定位之外,都不会影响外界的盒子;

 

啥,看起来有点不明不白,那么到底有什么作用呢?

 

要解决这个问题,我们首先了解下BFC它的定位规则:

1. 内部的块级盒子,会在垂直方向上一个一个放置;

2. BFC盒子不会与浮动元素重叠,这一点很重要,可以用来实现两栏布局;

3.同一个盒子里面的的两个box上下边距会合并;

4.计算盒子高度时,浮动元素也会参与进来,这一点可以解决父盒子高度塌陷的问题;

     

那都有哪些元素会触发BFC呢?

1. overflow不是visible; 例如overflow为auto,scroll,hidden等等都可以触发;

2.position为absolute,fixed的元素,注意此处不包括position为relative的值;

3. float不为none的值,float:left等;

4.display为inline-block,table-cell的值;

5.根元素即html元素

 

来真正看看BFC的作用吧!

1.防止元素被浮动元素覆盖;

2.解决高度塌陷的问题;

3.不同BFC的盒子不会出现margin合并;

4. 可以包含浮动元素

附:

margin合并:

如果块元素的 margin-top 与它的第一个子元素的 margin-top 之间没有 border、padding、inline content、 clearance 来分隔，或者块元素的 margin-bottom 与它的最后一个子元素的 margin-bottom 之间没有 border、padding、inline content、height、min-height、 max-height 分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。
链接