首先來看個(gè)栗子：
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)點(diǎn)：不存在結(jié)構(gòu)和語義化問題平匈，代碼量極少
缺點(diǎn)：內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉里伯，無法顯示需要溢出的元素 - 父元素也設(shè)置浮動(dòng)（加個(gè)float：left/right）
優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語義化問題荸型，代碼量極少
缺點(diǎn)：使得與父元素相鄰的元素的布局會(huì)受到影響，不可能一直浮動(dòng)到body绍赛，不推薦使用 - 父元素設(shè)置 display:table
優(yōu)點(diǎn)：結(jié)構(gòu)語義化完全正確趾痘，代碼量極少
缺點(diǎn)：盒模型屬性已經(jīng)改變逆济，由此造成的一系列問題蜀肘，得不償失绊汹，不推薦使用 - 使用 :after 偽元素
優(yōu)點(diǎn)：需要注意的是 :after 是偽元素，不是偽類（某些CSS手冊里面稱之為“偽對象”）扮宠，很多清除浮動(dòng)大全之類的文章都稱之為偽類西乖，不過csser要嚴(yán)謹(jǐn)一點(diǎn)，這是一種態(tài)度坛增。由于IE6-7不支持:after获雕，使用 zoom:1 觸發(fā) hasLayout。
缺點(diǎn)：兼容性不是很好收捣。 - 在浮動(dòng)的元素后面添加空標(biāo)簽 <div class="clear"></div> 清除浮動(dòng)
優(yōu)點(diǎn)：簡單明了
缺點(diǎn)：無意義的空標(biāo)簽届案，不利于語義化
個(gè)人比較偏向于：after的方式（蘋果網(wǎng)站就是采用此種方式）
