本文介绍了相邻兄弟项的边际折叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在读关于边际利润缩水的报道，我偶然发现了这一点：margin
相邻兄弟项相邻兄弟项的页边距已折叠 (后一个同级需要清除浮点后的情况除外)。
我不理解最后一个短语"除非后面的兄弟需要清除浮点数"。谁能举个例子？
谢谢
推荐答案
首先，下面的示例仅适用于基于Gecko的浏览器，如Windows或Android上的Firefox。Chrome/Webkit有很长一段不正确实施清除的历史。
我认为那句话是对规范的曲解。规范实际说明的是
两个页边距相邻当且仅当：
两者都属于流动中的挡路级别的盒子，都参与相同的挡路格式上下文，并且没有行框、没有空白、没有填充和没有边框将它们分开
那么是什么原因导致通关在这里产生影响呢？它不是后一个同级的清空，而是中间元素的清空。
考虑此示例。
.container {
overflow:auto;
border:2px solid;
}
span {
float:left;
width:100px;
height:100px;
background:red;
opacity:0.2;
}
.container > div {
height:60px;
margin:20px 0;
background:blue;
}
b {
display:block;
clear:left;
}<p><strong>View this in Firefox</strong></p>
<div class="container">
<span></span>
<div></div>
<b></b>
<div></div>
</div>这里我们可以看到，第一个div的边框和浮动一样高。<b>元素不需要下移来清除浮动，因此它没有间隙。它也没有内容、填充、边框或边距，因此第一个div的下边距与第二个div的上边距折叠。
但是，在此示例中：
.container {
overflow:auto;
border:2px solid;
}
span {
float:left;
width:100px;
height:100px;
background:red;
opacity:0.2;
}
.container > div {
height:59px;
margin:20px 0;
background:blue;
}
b {
display:block;
clear:left;
}<p><strong>View this in Firefox</strong></p>
<div class="container">
<span></span>
<div></div>
<b></b>
<div></div>
</div>第一个div的边框比浮动的高度短1px。因此，清除<b>元素会将其向下移动-即它有间隙。现在，即使元素仍然没有内容、填充、边框或边距并且仅向下移动1px，第一个div的下边距和下div的上边距也无法折叠。
在Chrome中，<b>元素上的clear:left会导致边距不折叠，而不管它是否有间隙，只有在需要向下移动经过浮动时才应该有间隙。
这篇关于相邻兄弟项的边际折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！