爲什麼孩子垂直邊距不能擴展父容器？

我碰到過一個案例，我需要一個孩子的保證金來擴展父容器。我發現父級以外的空間已分配，但父級本身未擴展。然後我發現通過向父級添加「overflow：hidden」我可以解決這個問題。爲什麼孩子垂直邊距不能擴展父容器？

誰能解釋爲什麼會出現這種情況？

UPDATE：

我發現添加任何填充或邊界值父還修復了這一點。

Updated Example

來源

2012-07-26 wilsonpage

+1好問題。已經使用這種修復的年齡..所有這一次不知道原因..想知道這一點.. – techfoobar 2012-07-26 11:43:32

這是唯一的修復？這很煩人，處理'overflow：hidden'的後果' – wilsonpage 2012-07-26 11:44:26

一種解決方法是給父代提供'padding：10px'，而不是給孩子留下餘量。 – techfoobar 2012-07-26 11:49:32

的回答「爲什麼」的好，簡潔here描述。有一些屬性可以建立「block formatting context」。即：

浮標，絕對[和固定]定位元素，塊容器（如直列塊，表細胞，和表字幕）未阻斷盒，和塊盒用「溢出'除'可見'以外（，當該值已傳播到視口時）爲其內容建立新的塊格式化上下文。

它是塊格式化上下文的這種改變，這就是爲什麼這樣的解決方案作爲評價工作上面給出的如何margin（和在一個的情況下前述float，padding以下流入元件）操作原因。

來源

2012-07-26 12:24:29 ScottS

鏈接到的文章不再可從colinaarts.com域獲得，但可在[這裏]（https://web.archive.org/web/20150423190902/http://colinaarts.com/articles/the-magic-的溢出隱藏/）。簡單而恰到好處。謝謝！ – coderfin 2015-11-02 17:31:01

我認爲利潤率倒塌的原因是：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

來源

2012-07-26 12:18:06 Thierry

爲什麼孩子垂直邊距不能擴展父容器？

回答

相關問題