BFC 即 Block Formatting Contexts (塊級格式化上下文)
官方文檔到中是這么介紹的：一個 BFC 區(qū)域包含創(chuàng)建該上下文元素的所有子元素，但是不包括創(chuàng)建了新的BFC的子元素的內(nèi)部元素，BFC 是一塊塊獨(dú)立的渲染區(qū)域，可以將 BFC 看成是元素的一種屬性，擁有了這種屬性的元素就會使他的子元素與世隔絕，不會影響到外部其他元素
具有 BFC 特性的元素可以看做是隔離了的獨(dú)立容器，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器所沒有的的一些特性。通俗一點(diǎn)來講，它的作用是創(chuàng)建一個獨(dú)立的渲染區(qū)域，使容器內(nèi)的元素和容器外的元素的樣式不會相互影響
怎樣使一個元素變成 BFC 區(qū)域
- 1、根元素 <html> 或其他包含它的元素：根元素本身就是 BFC，而其他元素如果包含根元素，則它們也會成為 BFC
- 2、定位元素：元素的 position 屬性設(shè)置為 absolute 或 fixed，這樣的元素會形成 BFC
- 3、浮動元素：元素的 float 屬性設(shè)置為非 none 的值，如 left 或 right，這樣的元素會形成BFC
- 4、具有 overflow 屬性的塊元素：如果塊元素的 overflow 屬性值不是 visible，例如設(shè)置為hidden、scroll 或 auto，這樣的元素會形成 BFC
- 5、display 的值為 inline-block、table-cell、table-caption 或者 flex、inline-flex
可以解決的問題
1、解決外邊距的塌陷問題(垂直塌陷)，兩個盒子都有 100 的外邊距，正常應(yīng)該是 200 的距離，實際是 100
2、解決包含塌陷，子元素加 margin-top 可能會帶著父元素一起跑
3、清除浮動，因為子節(jié)點(diǎn)浮動，造成父節(jié)點(diǎn)高度塌陷
4、阻止標(biāo)準(zhǔn)流元素被浮動元素覆蓋
