bfc（block formatting content）：塊級格式化上下文,是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的互動限定區域。可以把bfc看做乙個盒子，盒子內部的元素與外部元素布局上互不影響。
1.垂直外邊距合併問題
最上面的div上邊距沒能把父元素main撐開，解決辦法給main新增 overflow：hidden;
還有一種就是兩div之間的margin值重疊，如果需要解除影響，
可以給兩個div分別再新增一層父元素section，對新增的section元素設定 overflow：hidden； 或者在main新增 overflow：hidden的基礎上，對下面的div設定display: inline-block;
2.用於清除浮動
main
div
給父元素新增 overflow：hidden 即可；
3.處理文字環繞 的問題
main
divp
練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格
練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格
練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格
練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格
練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格練習寫部落格
可以看到，文字所在的元素背景佔據了一行，因為背景為紅色的元素是浮動元素，所以脫離了文件流，而文字圍繞著紅色元素，這不是我們想要的效果，這時可以給第二個元素觸發bfc將它們區分開來：
雖然可以用bfc可以解決以上問題，但是給元素新增觸發bfc的屬性也帶了一些***，所以盡量選擇合適的屬性解決問題
BFC 以及 外邊距合併問題
bfc定義 bfc block formatting context 直譯為 塊級格式化上下文 它是乙個獨立的渲染區域，只有block level box參與，它規定了內部的block level box如何布局，並且與這個區域外部毫不相干。bfc布局規則特性 在bfc中 盒子從頂端開始垂直的乙個接...
BFC外邊距穿透具體 是神馬玩意兒
bfc外邊距穿透具體 是神馬玩意兒 既然我們提到了bfc，那麼首先我們就應該知道bfc是神馬玩意兒，那這個bfc到底是啥呢，所謂的bfc它就是平常我們寫block和inline的標準文件流。其實他就是我們平常的塊級元素自頂向下排列，同級之間的containing block頂部乙個接乙個垂直排列，水...
解決 外邊距摺疊問題
當兩個元素垂直相鄰時，如果兩個元素分別向同一方向設定了各自的外邊距，那麼會產生合併，取其中最大正值。如果其中乙個元素是負的呢？答案 正值 負值 得 正值 如果兩個元素都是負值呢？答案 負值 負值 得 負值 總結 1.如果存在負值，會是減法 2.如果是正值，則直接取大值 博主建議 上面的了解一下就行，...