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的問題。