css - 關于margin折疊的一個問題。
問題描述
我在閱讀CSS2.2，但是我真的無法理解這句話的意思，以及它所適合的場景：
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上有個家伙也提了一樣的問題，回答者的答案我也不理解。。。
借用采納者的知乎鏈接，這句的意思是：
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中有定義。來個例子，先有個直觀的理解吧：
<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>
運行時，對比#b2有clear:both與沒clear:both時，b1與b2margin的折疊情況。
設置clear:both之后，#b2為了避開浮動的F，往下移動，出現了clearance也就是空隙，b1與b2不再折疊！
另外，stack overflow那個家伙的答案我沒再細究。pass。
問題解答
回答1：可以看這里：https://www.zhihu.com/question/24563593
回答2：這個說明也挺清晰的：http://www.raccoon-tech.com/css-margin-collapse
回答3：只要理解 clearance 產生的條件是當 clear 的元素在沒有被 clear 的時候（正常時），它的 boarder top 要比 float 元素的 boarder bottom 要高。如果 clear 的元素本來就在 float 元素下面，就不會產生 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.
所以這個規則大白話就是：對于一個帶 clearance 的元素，當它 margin top 和 margin bottom 相鄰時（比如 height 為 0 、沒有 padding 和 border），這個兩個 margin 會跟接下來相鄰元素的 margin 一起計算 collapsing，但不會跟父元素的 margin bottom 計算（這情況下就是只算這兩個 margin）。
這里還要注意 clearance 計算是以 boarder edge 做參考，所以對于 margin top 和 margin bottom collapse 的元素，最后要注意還會吞掉與 margin top 相當的高度。
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.
相關文章：
1. 微信公眾號在線生成二維碼帶參數怎么搞？2. 微信開放平臺 - android 微信支付后點完成按鈕，后回調打開第三方頁面，屏幕閃動，求解決方法3. PHP單例模式4. javascript - angularjs使用ui-router何時拉數據？5. vue計算屬性怎么樣與for結合使用6. javascript - webpack dllPlugin如何打包vendor到html里面？7. javascript - 微信報redirect_uri參數錯誤8. 我在centos容器里安裝docker，也就是在容器里安裝容器，報錯了？9. android - 類似微信朋友圈或者QQ空間說說那種點擊圖片放大，并且有放大縮小手勢，左右滑動圖片手勢效果10. win10系統 php安裝swoole擴展
網公網安備