margin兩個經典bug:

處理bug漏洞，只能彌補，不能完全解決。

一、margin 塌陷問題：

沒加 margin 時，

給wrapper的子元素加上margin-top之后，發現父元素也跟著子元素走，

給wrapper加上margin-top之后，發現子元素的margin-top變成100px了，這就是margin塌陷問題，

注意：垂直方向的margin-top，父子元素是結合到一起的，它倆會取最大的值。

怎么彌補這個bug呢？有兩個方法。

1、給它的父元素加條線，加個頂。(這種做法不專業)

2、觸發bfc。（這種方法比較專業）

那么bfc是什么呢？我們先來了解一下。

bfc：“block format context” ，簡稱，塊級格式化上下文。

設置bfc后，特定的盒子會遵循另一套語法規則。簡單的說，就是bfc能改變盒子的語法規則。

/* 如何觸發一個盒子的bfc */

方法一,position:absolute; （設置為絕對定位）

方法二，display:inline-block; （設置為行級塊元素）

方法三，float:left/right; （設置為浮動元素）

方法四，overflow:hidden; （設置為溢出部分隱藏）

二、margin 合并問題：

沒設置margin之前，

給demo1元素加上margin-bottom，看起來好像沒問題，

給demo2元素再加上margin-top，發現兩個元素之間的間隔沒變化，這就是margin 合并的問題了，

那這個問題又怎么彌補呢？是不是和margin一樣也能用bfc彌補呢？

對的，彌補margin合并問題，采用bfc彌補。

bfc前面說過了，這里直接演示了，

1、在demo2父級加上bfc：

加上 position:absolute; （設置為絕對定位）

加上 display:inline-block; （設置為行級塊元素）

加上 float:left/right; （設置為浮動元素）

加上 overflow:hidden; （設置為溢出部分隱藏）

2、在demo1父級加上bfc：

加上 position:absolute; （設置為絕對定位）

加上 display:inline-block; （設置為行級塊元素）

加上 float:left/right; （設置為浮動元素）

加上 overflow:hidden; （設置為溢出部分隱藏）

演示完，發現在demo1父級加上bfc，好像并不是所有能觸發bfc的都能彌補margin合并問題。

總的來說，觸發bfc是可以彌補margin合并問題，但雖然彌補了margin合并問題，觸發bfc之后卻會引發更多問題。

因此，margin合并問題，一般不需要去彌補解決。

總結

以上是生活随笔為你收集整理的bfc是什么_关于margin的两个经典bug，以及bfc简述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。