css - 關(guān)于margin折疊的一個(gè)問(wèn)題。
問(wèn)題描述
我在閱讀CSS2.2，但是我真的無(wú)法理解這句話(huà)的意思，以及它所適合的場(chǎng)景：
If the top and bottom margins of an element with clearance p. 157 are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.
StackOverflow上有個(gè)家伙也提了一樣的問(wèn)題，回答者的答案我也不理解。。。
借用采納者的知乎鏈接，這句的意思是：
If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.（有間隙不折疊)
哪，什么才是有間隙呢？這里的間隙clearance在css2.2中有定義。來(lái)個(gè)例子，先有個(gè)直觀的理解吧：
<html><head> <style>* {padding: 0; margin: 0;}#b1 { width: 300px; height: 100px; margin-bottom: 4em; background-color: #0d8ba1;}#F { float: left; width: 100px; height: 70px; background-color: yellow;}#b2 { /*clear: both;*/ width: 300px; height: 100px; background-color: red; margin-top: 2em;} </style></head><body><p id='b1'></p><p id='F'></p><p id='b2'></p></body></html>
運(yùn)行時(shí)，對(duì)比#b2有clear:both與沒(méi)clear:both時(shí)，b1與b2margin的折疊情況。
設(shè)置clear:both之后，#b2為了避開(kāi)浮動(dòng)的F，往下移動(dòng)，出現(xiàn)了clearance也就是空隙，b1與b2不再折疊！
另外，stack overflow那個(gè)家伙的答案我沒(méi)再細(xì)究。pass。
問(wèn)題解答
回答1：可以看這里：https://www.zhihu.com/question/24563593
回答2：這個(gè)說(shuō)明也挺清晰的：http://www.raccoon-tech.com/css-margin-collapse
回答3：只要理解 clearance 產(chǎn)生的條件是當(dāng) clear 的元素在沒(méi)有被 clear 的時(shí)候（正常時(shí)），它的 boarder top 要比 float 元素的 boarder bottom 要高。如果 clear 的元素本來(lái)就在 float 元素下面，就不會(huì)產(chǎn)生 clearance。
If this hypothetical position of the element’s top border edge is not past the relevant floats, then clearance is introduced, and margins collapse according to the rules in 8.3.1.
所以這個(gè)規(guī)則大白話(huà)就是：對(duì)于一個(gè)帶 clearance 的元素，當(dāng)它 margin top 和 margin bottom 相鄰時(shí)（比如 height 為 0 、沒(méi)有 padding 和 border），這個(gè)兩個(gè) margin 會(huì)跟接下來(lái)相鄰元素的 margin 一起計(jì)算 collapsing，但不會(huì)跟父元素的 margin bottom 計(jì)算（這情況下就是只算這兩個(gè) margin）。
這里還要注意 clearance 計(jì)算是以 boarder edge 做參考，所以對(duì)于 margin top 和 margin bottom collapse 的元素，最后要注意還會(huì)吞掉與 margin top 相當(dāng)?shù)母叨取?/p>
Then the amount of clearance is set to the greater of:
The amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that is to be cleared.
The amount necessary to place the top border edge of the block at its hypothetical position.
相關(guān)文章：
1. java固定鍵值轉(zhuǎn)換，使用枚舉實(shí)現(xiàn)字典？2. vim - win10無(wú)法打開(kāi)markdown編輯器3. mysql - 千萬(wàn)數(shù)據(jù) 分頁(yè)，當(dāng)偏移量 原來(lái)越大時(shí)，怎么優(yōu)化速度4. 如何解決tp6在zend中無(wú)代碼提示5. javascript - 有沒(méi)有類(lèi)似高鐵管家的時(shí)間選擇插件6. 這是什么情況？？？7. python - flask學(xué)習(xí)，user_syy添加報(bào)role is invalid keyword for User.8. css - BEM 中塊(Block)有木有什么標(biāo)準(zhǔn) 何時(shí)決定一個(gè)部分提取為塊而不是其父級(jí)的元素呢(Element)?~9. css3 - less或者scss 顏色計(jì)算的知識(shí)應(yīng)該怎么學(xué)?或者在哪里學(xué)?10. javascript - 微信網(wǎng)頁(yè)開(kāi)發(fā)從菜單進(jìn)入頁(yè)面后，按返回鍵沒(méi)有關(guān)閉瀏覽器而是刷新當(dāng)前頁(yè)面，求解決？
網(wǎng)公網(wǎng)安備