當(dāng)容器未設(shè)置高度的時候，容器里面的內(nèi)容有浮動的元素，這時容器的高度不能自動伸長去適應(yīng)內(nèi)容的高度俄占，使得容器塌陷，內(nèi)容溢出到容器外面而影響布局淆衷。這個現(xiàn)象叫浮動溢出缸榄，為了防止這個現(xiàn)象的出現(xiàn)，需要CSS清除浮動祝拯。
方法1:在浮動的div后面增加一個空的div 設(shè)置clear：both
html代碼
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
css代碼
.main{border:1px solid green;}
.clear{clear:both;}
.left{width:100px; float:left;background:red;height:100px;}
.right{width:100px;background:#000000;height:100px;float:left;}
方法2:容器設(shè)置overflow：hidden?
html代碼
<div class="main">
<div class="left"></div>
<div?class="right"></div>
</div>
css代碼
.main{border:1px solid green;overflow:hidden?}
.left{width:100px; float:left;background:red;height:100px;}
.right{width:100px;background:#000000;height:100px;float:left;}
方法3:使用css的:after偽元素
html代碼
<div class="main">
<div class="left"></div>
<div?class="right"></div>
</div>
css代碼
.main{border:1px solid green;overflow:hidden?}
.main:after{content:'';clear:both;display:block;}
.left{width:100px; float:left;background:red;height:100px;}
.right{width:100px;background:#000000;height:100px;float:left;}
