CSS-完美清除浮动-外边距重叠

浮动的完美解决方案

parentClass::after{
	content:'';
	display:disblock;
	clear:both;
}

外边距重叠的完美解决方案

parentClass::before{
	content:'';
	display:table;
	clear:both;
}

同时解决浮动、外边距重叠

clearfix::before,
clearfix::after{
	content:'';
	display:table;(既可以解决高度塌陷，又可以解决外边距重叠)
	clear:both;
}

clearfix为任意类名，用时添加类名即可。

原理：

正常情况下

<style type="text/css">
	.parent {
		border: 10px red solid;
	}
	
	.box1 {
		width: 100px;
		height: 100px;
		background-color: #4CAF50;
	}
</style>

<div class="parent">
	<div class="box1"></div>
</div>

子元素设置浮动以后，父元素会高度塌陷。

.box1 {
	float: left;
	width: 100px;
	height: 100px;
	background-color: #4CAF50;
}

处理措施：

.parent::after {
	content: '';
	display: block;
	clear: both;
}		
给父元素的最后添加一个空元素，并设置为块元素，同时清除浮动。
浏览器解析时，会给最后一个空元素添加一个上外边距，此外边距的高度等于此父元素中高度最大的浮动元素的高度（both）。
所以，这个空元素撑起了父元素的高度。

注意：clear：both；
清楚地并不是两边的浮动，而是两边之中对当前元素影响最大的那个。

外边距重叠的解决思想与解决高度塌陷的思想是一样的，只不过一个是after，一个是before。