BFC自適應佈局

BFC(Block Formatting Context)塊級格式化上下文。它是一個獨立的渲染區域。

它決定了塊級元素如何對它的內容進行佈局，以及與其餘元素的關係和相互關係。

         塊級元素：父級（是一個塊元素）

         內容：子元素（是一個塊元素）

         其餘元素：與內容同級別的兄弟元素

         相互做用：BFC裏的元素與外面的元素不會發生影響              

觸發條件或者說哪些元素會生成BFC：

　　知足下列條件之一就可觸發BFC

　　【1】根元素

　　【2】float的值不爲none

　　【3】overflow的值不爲visible（hidden、auto、scroll）

　　【4】display的值爲inline-block、table-cell、table-caption、flex

　　【5】position的值爲absolute或fixed 　

BFC有哪些做用：

　　1.自適應兩欄佈局

                  

　　2.能夠阻止同級元素被浮動元素覆蓋

           

　　3.能夠包含浮動元素——清除內部浮動

　　　　經過改變高度塌陷的父盒子的屬性值，使其成爲BFC，以此來包含子浮動盒子。

           

　　4.分屬於不一樣的BFC時能夠阻止margin重疊

屬於同一個BFC的兩個相鄰塊級子元素的上下margin會發生重疊，因此當兩個相鄰塊級子元素分屬於不一樣的BFC時能夠阻止margin重疊

操做方法：給其中一個div外面包一個div，而後經過觸發外面這個div的BFC，就能夠阻止這兩個div的margin重疊

              

BFC佈局與普通文檔流佈局區別                  

         普通文檔流佈局規則

                1.浮動的元素是不會被父級計算高度

                2.非浮動元素會覆蓋浮動元素的位置

                3.margin會傳遞給父級

                4.兩個相鄰元素上下margin會重疊

        BFC佈局規則

                1.浮動的元素會被父級計算高度（父級觸發了BFC）

                2.非浮動元素不會覆蓋浮動元素位置（非浮動元素觸發了BFC）

                3.margin不會傳遞給父級（父級觸發了BFC）

                4.兩個相鄰元素上下margin不會重疊（給其中一個元素增長一個父級，而後讓他的父級觸發BFC）

 

IFC（行級格式化上下文）

佈局規則：

（1）內聯元素會在水平方向一個個地放置；

（2）IFC地高度是由最高盒子的高度決定地；

（3）當一行不夠放置的時候會自動切換到下一行；

（4）內部元素水平方向的margin、padding、border有效，垂直方向上無效。