20170601-BFC(块级格式化上下文)

BFC

BFC的全称是Block Format Content -- 块级格式化上下文。浮动、绝对定位的元素(absolute、fixed定位)、块容器(display属性为inline-block、table、table-cell、table、table-caption)、带有overflow属性(该属性值不为visible和inherit)的display为block的块级元素会在其内部建立新的块级格式化上下文。

BFC的作用：

元素们处于同一个块级格式化上下文时，会遵守相同的规则/格式(例如父子元素的margin会重叠)，但是处于不同的块级格式化上下文时，元素的排列展示遵守的规则/格式是不同的(处于不同的BFC的父子元素的margin不会重叠--->父级元素处于一个BFC中，父级元素内部新建一个BFC)

生成BFC:

• 设置浮动

• 设置绝对定位

• 设置display属性为inline-block、table、table-cell、table-caption

• 设置overflow属性为 hidden、auto、scroll(不能设置为visible和inherit)

BFC的实际应用：

• 父子元素的margin-top、margin-bottom会折叠，在父元素内部生成新的BFC，可以阻止父子元素的margin-top、margin-bottom重叠

• BFC可以阻止文字围绕浮动元素的情况：下图中的例子中，需要在block02元素内部生成新的BFC，使得block02内部的文字不围绕浮动元素

• 使用浮动元素可能会出现父容器高度为0的现象，在父容器内部生成新的BFC可以解决该问题

总结：

给块级元素设置某些属性，会在其内部产生新的BFC(块级格式化上下文)，处于相同的BFC的元素会遵守相同的规则/格式。使用BFC可以解决以下问题：父子元素的上下margin合并问题、文字围绕浮动元素的问题和子元素浮动导致父元素高度为0的问题。