margin collapsing 解決

時間 2019-12-10

原文原文鏈接

1 ，初始代碼以下：html

<body style="border: 2px solid blue;">
　　<div id="container" style="height: 200px; background-color: gray; ">
　　　　<p style="margin-top: 0px; height: 20px; background-color: red;">test</p>
　　</div>
</body>佈局

　　效果：flex

2，修改一下p元素的margin-top爲100px 以下：spa

<body style="border: 2px solid blue;">
　　<div id="container" style="height: 200px; background-color: gray; ">
　　　　<p style="margin-top: 100px; height: 20px; background-color: red;">test</p>
　　</div>
</body>orm

　　效果以下：htm

p元素的margin彷佛變成了div元素的maginblog

3,在p元素前加了內容，代碼：作用域

<body style="border: 2px solid blue;">
　　<div id="container" style="height: 200px; background-color: gray; ">
　　 
　　<p style="margin-top: 100px; height: 20px; background-color: red;">test</p>
　　</div>
</body>io

　　效果以下：class

這下正常了，margin還給p元素了，可是，由於加了空行，因此距離不是100px了... 不可取的解決方案。

科學的解決方法：

<body style="border: 2px solid blue;">
	<div id="container" style="height: 200px; background-color: gray; overflow: hidden;">
	    <p style="margin-top: 100px; height: 20px; background-color: red;">test</p>
	</div>
</body>

=====================================================

進入正題：這是什麼緣由，以及如何解決。

緣由分析： 同一個BFC內，垂直方向盒子的上下會出現margin重疊

BFC是什麼：

BlockFormatting (塊級格式化上下文)

能夠同時存在不少盒子，獨立的佈局做用域。固然也只有塊級元素能參與轉化成BFC。

BFC內部的佈局規則

一、內部的Box會在垂直方向，一個接一個地放置。

二、同一個BFC內，垂直方向盒子的上下會出現重疊

三、每一個元素的 box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。

四、子BFC的區域不會與float box重疊。

五、BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。