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。