BFC自適應布局
BFC(Block Formatting Context)塊級格式化上下文。它是一個獨立的渲染區域。
它決定了塊級元素如何對它的內容進行布局,以及與其他元素的關系和相互關系。
塊級元素:父級(是一個塊元素)
內容:子元素(是一個塊元素)
其他元素:與內容同級別的兄弟元素
相互作用:BFC裏的元素與外面的元素不會發生影響
觸發條件或者說哪些元素會生成BFC:
滿足下列條件之一就可觸發BFC
【1】根元素,即HTML元素
【2】float的值不為none
【3】overflow的值不為visible
【4】display的值為inline-block、table-cell、table-caption
【5】position的值為absolute或fixed
BFC有哪些作用:
1.自適應兩欄布局
2.可以阻止元素被浮動元素覆蓋
3.可以包含浮動元素——清除內部浮動
通過改變高度塌陷的父盒子的屬性值,使其成為BFC,以此來包含子浮動盒子。
4.分屬於不同的BFC時可以阻止margin重疊
屬於同一個BFC的兩個相鄰塊級子元素的上下margin會發生重疊,所以當兩個相鄰塊級子元素分屬於不同的BFC時可以阻止margin重疊
操作方法:給其中一個div外面包一個div,然後通過觸發外面這個div的BFC,就可以阻止這兩個div的margin重疊
FBC布局與普通文檔流布局區別
普通文檔流布局規則
1.浮動的元素是不會被父級計算高度
2.非浮動元素會覆蓋浮動元素的位置
3.margin會傳遞給父級
4.兩個相鄰元素上下margin會重疊
BFC布局規則
1.浮動的元素會被父級計算高度(父級觸發了BFC)
2.非浮動元素不會覆蓋浮動元素位置(非浮動元素觸發了BFC)
3.margin不會傳遞給父級(父級觸發了BFC)
4.兩個相鄰元素上下margin會重疊(給其中一個元素增加一個父級,然後讓他的父級觸發BFC)
BFC自適應布局