首先來看個栗子：
css代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.main {width:300px;height:auto;padding:10px;background:#ccc;}
.main .left {width:100px;height:50px;background:red;float:left;}
.main .right {width:100px;height:50px;background:blue;float:left;}
.footer {width:300px;height:20px;background:green;}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div id="footer"></div>
</body>
</html>
結(jié)果如果所示：
解決這種問題有幾種方法：
- 在父級添加 overflow：hidden
優(yōu)點：不存在結(jié)構(gòu)和語義化問題，代碼量極少
缺點：內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素 - 父元素也設(shè)置浮動（加個float：left/right）
優(yōu)點：不存在結(jié)構(gòu)和語義化問題，代碼量極少
缺點：使得與父元素相鄰的元素的布局會受到影響，不可能一直浮動到body，不推薦使用 - 父元素設(shè)置 display:table
優(yōu)點：結(jié)構(gòu)語義化完全正確，代碼量極少
缺點：盒模型屬性已經(jīng)改變，由此造成的一系列問題，得不償失，不推薦使用 - 使用 :after 偽元素
優(yōu)點：需要注意的是 :after 是偽元素，不是偽類（某些CSS手冊里面稱之為“偽對象”），很多清除浮動大全之類的文章都稱之為偽類，不過csser要嚴謹一點，這是一種態(tài)度。由于IE6-7不支持:after，使用 zoom:1 觸發(fā) hasLayout。
缺點：兼容性不是很好。 - 在浮動的元素后面添加空標(biāo)簽 <div class="clear"></div> 清除浮動
優(yōu)點：簡單明了
缺點：無意義的空標(biāo)簽，不利于語義化
個人比較偏向于：after的方式（蘋果網(wǎng)站就是采用此種方式）
