MDN上外边距折叠的定义
块的上外边距
margin-top和下外边距margin-bottom有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
注：有设定float和position=absolute的元素不会产生外边距重叠行为。
怎样的布局才会造成外边距折叠？以及如何解决子元素因外边距给父元素带来的影响
1. 同一层级的相邻元素之间，即使是中间有空的块级元素
<style>
* {
margin: 0;
padding: 0;
}
.container {
background: darkcyan;
}
.container p:first-child {
margin-bottom: 20px;
height: 20px;
}
.container p:last-child {
margin-top: 40px;
height: 20px;
}
</style>
<body>
<div class="container">
<p>margin-bottom 20px</p>
<p>margin-top 40px</p>
</div>
</body>
两个p标签高度都是20px，一个外边距20px 一个外边距40px 按常规思想来说，父元素高度应该为100px，但是父元素高度只有 80px，原因就是向上的40px外边距 合并了向下的20px外边距
2. 没有内容将父元素和子元素分开
父元素和子元素之间，没有边框border 内边距padding 这样的内容，也没有块级上下文，行内元素等。总之就是父级元素直接和子元素紧挨，就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。
p标签外上边距40px，然后父元素虽然没有向上外边距，但是也还是被子元素带着向偏移了40px
根据溢出的原因，我们主要可以用以下几种方式，消除子元素margin对父级元素偏移的影响。
- 给父级元素加上 1px 的边框
border或者padding。 - 在子元素和父元素直接加个空的div。
- 父元素加上一个overflow:hidden的属性。
- 父元素或者子元素使用浮动或者绝对定位。
但是以上的方法均会带来其他不同程度的负面影响，那我们有没有更好的解决办法？
我从设置伪类元素清除浮动中受到了一点启发，即用 before 或者 after 伪类元素，设置高度为零 display 为块级然后随便给一个content值，最后再加上 overflow:hidden。具体实现如下：
.clear-margin::before {
content: ".";
overflow: hidden;
display: block;
height: 0px;
}
.clear-margin::after {
content: ".";
overflow: hidden;
display: block;
height: 0px;
}
是不是感觉和清除浮动的clearfix样式很像。
网友评论