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

它決定了塊級元素如何對它的內(nèi)容進(jìn)行布局，以及與其他元素的關(guān)系和相互關(guān)系。

? ? ? ?? 塊級元素：父級（是一個(gè)塊元素）

? ? ? ?? 內(nèi)容：子元素（是一個(gè)塊元素）

? ? ? ?? 其他元素：與內(nèi)容同級別的兄弟元素

? ? ? ?? 相互作用：BFC里的元素與外面的元素不會(huì)發(fā)生影響 ? ? ? ? ? ? ?

觸發(fā)條件或者說哪些元素會(huì)生成BFC：

　　滿足下列條件之一就可觸發(fā)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.自適應(yīng)兩欄布局
　　2.可以阻止同級元素被浮動(dòng)元素覆蓋

? ? ? ? ? ?

　　3.可以包含浮動(dòng)元素——清除內(nèi)部浮動(dòng)

　　　　通過改變高度塌陷的父盒子的屬性值，使其成為BFC，以此來包含子浮動(dòng)盒子。

? ? ? ? ? ?

　　4.分屬于不同的BFC時(shí)可以阻止margin重疊

屬于同一個(gè)BFC的兩個(gè)相鄰塊級子元素的上下margin會(huì)發(fā)生重疊，所以當(dāng)兩個(gè)相鄰塊級子元素分屬于不同的BFC時(shí)可以阻止margin重疊

操作方法：給其中一個(gè)div外面包一個(gè)div，然后通過觸發(fā)外面這個(gè)div的BFC，就可以阻止這兩個(gè)div的margin重疊

? ? ? ? ? ? ??

BFC布局與普通文檔流布局區(qū)別 ? ? ? ? ? ? ? ? ?

? ? ? ?? 普通文檔流布局規(guī)則

? ? ? ? ? ? ? ? 1.浮動(dòng)的元素是不會(huì)被父級計(jì)算高度

? ? ? ? ? ? ? ? 2.非浮動(dòng)元素會(huì)覆蓋浮動(dòng)元素的位置

? ? ? ? ? ? ? ? 3.margin會(huì)傳遞給父級

? ? ? ? ? ? ? ? 4.兩個(gè)相鄰元素上下margin會(huì)重疊

? ? ? ? BFC布局規(guī)則

? ? ? ? ? ? ? ? 1.浮動(dòng)的元素會(huì)被父級計(jì)算高度（父級觸發(fā)了BFC）

? ? ? ? ? ? ? ? 2.非浮動(dòng)元素不會(huì)覆蓋浮動(dòng)元素位置（非浮動(dòng)元素觸發(fā)了BFC）

? ? ? ? ? ? ? ? 3.margin不會(huì)傳遞給父級（父級觸發(fā)了BFC）

? ? ? ? ? ? ? ? 4.兩個(gè)相鄰元素上下margin不會(huì)重疊（給其中一個(gè)元素增加一個(gè)父級，然后讓他的父級觸發(fā)BFC）

轉(zhuǎn)載于:https://www.cnblogs.com/xiaoan0705/p/9035637.html

總結(jié)

以上是生活随笔為你收集整理的BFC自适应布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。