子元素 margin 超出父元素的bug(垂直塌陷)

今天写一个demo发现有一个很奇怪的页面表现，就是当子元素有margin时会影响父元素的margin：

<style>
		.father{
			width: 500px;
			height: 400px;
			border: 50px solid blue;
			border-color: red; 
			background: blue;
			overflow: scroll;
		}

		.son{
			height: 800px;
			background: green;
		}
		.son p{
			margin: 30px;
		}
	</style>

<div class="father" id="father">
		<div class="son" id="son">
			<p>这是子节点</p>
			<p>这是子节点</p>
			<p>这是子节点</p>
			<p>这是子节点</p>
			<p>这是子节点</p>
			<p>这是子节点</p>
			<p>这是子节点</p>
			<p>这是子节点</p>
	</div>
</div>

父元素无缘故地有了一个 margin-top，而且还是子元素 p标签的margin

经过查阅资料，才知道原来是CSS2.1的盒模型中规定的内容

 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

这样就能解释为什么会出现上面的情况了，div 和 p 元素之间的关系是相互嵌套的，所以他们的margin-top 合并 成 数值大的哪一个。那要解决这个由 '规定'导致的问题，可以从 没有非空内容、Padding或Border分隔 三方面入手:

1、给 son 元素一个 padding 属性，但是会增加son 元素的高度

.son{
	height: 800px;
	background: green;
	padding: 1px;
}

2、给 son 元素 一个 border属性，同样会增加son 元素的高度

.son{
	height: 800px;
	background: green;
	border: 1px solid #fff;
}

3、在  son 元素 插入一个非空元素，可以利用 :before 伪类的方式插入,不影响son 元素高度

 .son:before{
     content:"";
     display:table;
}

4、给son 元素 设置 ‘超出隐藏’，即吞掉 子元素 超出的部分 

.son{
	height: 800px;
	background: green;
	overflow: hidden;
}

 

哈哈。前端是越学越觉得自己会的好少