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的问题。