overflow:hidden 能觸發BFC，為什麼不會阻止垂直外邊距疊加？

01-02

參考資料：那些年我們一起清除過的浮動
如何觸發BFC？

overflow 除了visible 以外的值（hidden，auto，scroll ）

BFC的特性：

1)塊級格式化上下文會阻止外邊距疊加
當兩個相鄰的塊框在同一個塊級格式化上下文中時，它們之間垂直方向的外邊距會發生疊加。換句話說，如果這兩個相鄰的塊框不屬於同一個塊級格式化上下文，那麼它們的外邊距就不會疊加。
————————以上為背景——————
& & & & && & .rowone { background: #f00; height: 100px; width: 100%; margin-bottom: 100px; overflow: hidden; }
.rowtow { background: #090; height: 100px; width: 100%; margin-top: 100px; overflow: hidden; } & & & && && & &

瀉藥

只揀點好答的答答

最好去看CSS規範文檔

不要看一些亂七八糟的小文

大多數寫完了也沒專業的人review

裡面肯定有個別不真的地方

那塊兒的參考鏈接指的地方也不對

鬼知道為什麼寫成這樣

興許是跟 Visual formatting model

里的這句

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with "overflow" other than "visible") must not overlap the margin box of any floats in the same block formatting context as the element itself.

搞混了

BFC 就是個為了布局計算簡單點出來的玩意

要是所有都從初始包含塊寬Global坐標得累死

說白了他就是個變了名字的初始包含塊

是一個獨立計算區域

它裡面實際元素累加了多高就是多高

且普通流內元素還是根據普通流 margin 摺疊原則摺疊

只是跟初始包含塊一樣直接子孫元素與該框上下邊界不能邊距摺疊

不是倆上下相鄰的BFC之間不摺疊

外邊距摺疊(margin collapse) 發生的場景是，在同一個塊級盒子布局上下文(BFC)中相鄰的次方向外邊距會摺疊。注意，這裡強調了相鄰的外邊距，也就是說，中間不能有padding和border隔開，如果有，外邊距不會摺疊。這裡也強調了在BFC中，所以行內級盒子肯定不會摺疊外邊距（它在ifc中）。這裡說了次方向，一般排版的次方向是垂直方向，所以直接說垂直外邊距摺疊，顯然不嚴謹。

題主說的情況，兩個相鄰的div明顯然處在同一個BFC中，而且次方向margin相鄰，所以發生了摺疊。

題主理解出錯的原因，大概是對BFC還是不夠理解，上文我特別地把BFC翻譯做了"塊級盒子布局上下文『，而不是』塊級格式化上下文『，主要是格式化這個詞太奇怪了。顧名思義，塊級別的盒子要處在BFC中，BFC中也只能有塊級盒子，如果你看到bfc中有行內級盒子，那麼這個行內級盒子已經被包裝在了一個匿名的塊級盒子中了。

那麼一個塊級盒子內部是什麼上下文呢？如果這個塊級盒子內部只有行內級盒子，那麼塊級盒子內部形成了一個新的ifc(行級盒子布局上下文)，如果這個塊級盒子內部是塊級盒子，那麼這些塊級盒子肯定要處在一個BFC中，這個BFC是那個BFC呢？我的理解是，在有必要的時候產生新的BFC，如果沒有必要那麼就不產生新的BFC，沿用祖先元素產生的BFC，有必要的情況是什麼呢，就是題主自己也知道的那些float,absolute,overflow,table-cell不一一列舉了。當然行內級盒子內部也會產生bfc，這是必要的，因為行內級盒子內部的塊級盒子要處在bfc中，而行內級盒子外部的布局上下文是ifc，沿用祖先元素的布局上下文顯然不行。

看到這裡你應該懂了，一個盒子內部形成什麼上下文，和它處在什麼上下文中是不一樣的。overflow:hidden的盒子內部生成了新的BFC和它自己和別的盒子處在同一個BFC中並不矛盾。

以上內容基於個人的學習和理解，如果有錯誤歡迎指出。

參看如何解決外邊距疊加的問題？