css中的外邊距合併時垂直方向上的普通流相鄰元素間

kbx8916發表於2016-07-20
CSS
作者：丁小倪
連結：https://www.zhihu.com/question/19823139/answer/13610574
來源：知乎
著作權歸作者所有，轉載請聯絡作者獲得授權。
為了不誤導大家，如果克軍指的是觸發上下<div>元素的BFC，必須指出克軍的答案是錯誤的，這樣的margin還是會摺疊的。

collapsing-margin的W3C官方介紹：w3.org/TR/CSS2/box.html#



一、首先你要知道什麼情況下會觸發：兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會摺疊

1.兩個或多個
說明其數量必須是大於一個，又說明，摺疊是元素與元素間相互的行為，不存在 A 和 B 摺疊，B 沒有和 A 摺疊的現象。

2.毗鄰
是指沒有被非空內容、padding、border 或 clear 分隔開，說明其位置關係。
注意一點，在沒有被分隔開的情況下，一個元素的 margin-top 會和它普通流中的第一個子元素(非浮動元素等)的 margin-top 相鄰； 只有在一個元素的 height 是 "auto" 的情況下，它的 margin-bottom 才會和它普通流中的最後一個子元素(非浮動元素等)的 margin-bottom 相鄰。

3.垂直方向
是指具體的方位，只有垂直方向的 margin 才會摺疊，也就是說，水平方向的 margin 不會發生摺疊的現象。

二、那麼如何使元素上下margin不折疊呢？

1.浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 摺疊（注意這裡指的是上下相鄰的元素）

2.建立了塊級格式化上下文的元素，不和它的子元素髮生 margin 摺疊（注意這裡指的是建立了BFC的元素和它的子元素不會發生摺疊）

我們都知道觸發BFC的因素是float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline-block）、position（除了static/relative）


很明顯大家可以看出來相鄰元素不發生摺疊的因素是觸發BFC因素的子集，也就是說如果我為上下相鄰的元素設定了overflow:hidden，雖然觸發了BFC，但是上下元素的上下margin還是會發生摺疊


這個問題其實和BFC並沒有太大的關係，希望大家不要濫用BFC，要知道BFC不是全能，建立BFC的初衷只是為了讓元素本身（包括它的子元素）能夠正確的計算自己的寬高。yuiblog.com/blog/2010/0

不發生摺疊的觸發因素是浮動元素、inline-block 元素、絕對定位元素，這個只是建立BFC因素的子集，但並不能說明建立了BFC的元素就不會發生摺疊，因為BFC還可以用overflow:hidden來建立。相反如果父元素觸發了BFC，那麼他的塊級子元素反而會發生摺疊。

這裡我寫了一個DEMO來說明這個問題：whycss.com/demo/collspa 建立BFC的三種情況都提到了，結果是子元素的上下margin都會發生摺疊 。




克軍提到的最後一個zoom，這是IE瀏覽器最初支援的縮放屬性，到現在只有最新的webkit核心的瀏覽器也支援。但只是在IE8以下的瀏覽器下才可成功觸發hasLayout，對於非IE瀏覽器也是沒有效果的，所以還是需要同樣的去建立BFC。關於hasLayout與BFC的介紹可參見本人部落格的文章smallni.com/?


關於最終如何解決這樣的問題，我的建議是在寫的時候儘量用同一方向的margin，比如都設定為top或者bottom，因為你在實踐的時候有時不需要為每個元素設定浮動、inline-block或者absolute 。


我希望大家明白的一點是：即使是再牛逼的大牛，也不可能每個細節都是非常清楚的，前端是一個涉足很深的職業，一個標籤或者一個屬性都可以引申出很多的東西。

相關文章