前端BFC佈局學習

BFC，全稱爲(Block formatting context)。按照個人理解是咱們在某一條件下會觸發BFC佈局，會產生必定的效果。

Block Formatting Contexts翻譯爲：塊級元素格式化上下文。它決定了塊級元素如何對它的內容進行佈局，以及與其餘元素的關係和相互做用。

其中塊級元素能夠理解爲父級元素，內容便是子元素，子元素也爲塊元素，其餘元素指的是與內容同級別的兄弟元素，相互做用指的是BFC裏的元素與外面的元素不會發生影響。

而觸發BFC的條件是：

一、float的值不爲none
二、overflow的值不爲visible
三、display的值爲table-cell、table-caption和inline-block之一
四、position的值不爲static或者releative中任何一個

普通文檔流的佈局規則(通常像我這種新手沒有佈局意識的，就應該是普通文檔流佈局了。。。)

一、浮動的元素是不會被父級計算高度
二、非浮動元素會覆蓋浮動元素的位置
三、margin會傳遞給父級
四、兩個相鄰的元素上下margin會重疊

BFC的佈局規則

一、浮動的元素會被父級計算高度(父級觸發了BFC)
二、非浮動元素不會覆蓋浮動元素的位置（非浮動元素觸發了BFC）
三、margin不會傳遞給父級（父級觸發了BFC）
四、兩個相鄰的元素上下margin不會重疊（給其中一個元素添加一個單獨的父級，而後讓他的父級觸發了BFC）

實例：

<!--html代碼
BFC知足條件：display:inline-block;
因此會遵循BFC的佈局規則，使得其浮動元素會被父級計算高度，從而也就避免了高度塌陷。
-->
<div style="border: 1px solid #f00; display: inline-block;">
    <div style="width: 100px; height: 100px; background: green; float: left;"></div>
</div>
 <!--
BFC知足條件：overflow:hidden；兄弟元素之間不會相互覆蓋
-->
<div style="border: 1px solid #f00; margin-top: 100px;">
    <div style="width: 100px; height: 100px; background: green; float: left;">hello1</div>
    <div style="width: 100px; height: 100px; background: red; overflow: hidden;">helloagain</div>
</div>
 <!--
    BFC知足條件：overflow:hidden；使得父級元素與子集元素margin不會重疊
-->
<div style="background: blue; margin-top: 100px; overflow: hidden;">
    <div style="width: 100px; height: 100px; background: green; margin-top: 100px;">hello1</div>
    <div style="width: 100px; height: 100px; background: red;">helloagain</div>
</div>

<!--
    BFC知足條件：overflow:hidden；使得父級元素與子集元素margin不會重疊，以及同級元素的margin不會重疊
-->
<div style="margin-top: 100px;">
    <div style="width: 100px; height: 100px; background: green; margin: 100px 0;">hello1</div>
    <div style="overflow: hidden;">
        <div style="width: 100px; height: 100px; background: red; margin: 100px 0;">helloagain</div>
    </div>
</div>