本章主要介紹三種常用的清除浮動的方法，主要包括：
[1] 增加一個空 div, 使用 clear:both 將浮動元素 "擠到" 父元素中
[2] 在父元素里增加 overflow: hidden
[3] 使用偽類 :after (推薦)
- 清除浮動宜岛，其實就是清除元素被定義浮動之后帶來的脫離文檔流的影響。如果我們不想浮動元素后面的文字環(huán)繞著它身弊，而是希望后面的元素回歸到正常文檔流時候的布局列敲，這個時候我們可以使用清除浮動來實現(xiàn)。
- 如果父元素不設(shè)置高度瘫絮，并且沒有使用清除浮動填硕，浮動的子元素就無法填入到父元素中鹿鳖，造成父元素高度塌陷壮莹。高度的塌陷使我們頁面后面的布局不能正常顯示。
<!DOCTYPE html>
<html>
<head>
<title>清除浮動</title>
<meta charset="utf-8">
</head>
<style type="text/css">
/* 方法1: 增加一個空 div, 將浮動元素 "擠到" 父元素中 */
.div1{
width: 400px;
border: 1px solid red;
}
.div2{
border: 1px solid red;
margin: 10px 0;
width: 400px;
}
.left{
float: left;
width: 20%;
background:#DDD;
}
.right{
float: right;
width: 30%;
background:#DDD;
}
.clear { clear: both; } /* 關(guān)鍵代碼 */
/* 方法2: 在父元素里增加 overflow: hidden */
.overflow { overflow: hidden; } /* 關(guān)鍵代碼 */
/* 方法3: 使用偽類 :after (推薦) */
/* 解析原理：
1) display:block 使生成的元素以塊級元素顯示,占滿剩余空間;
2) height:0 避免生成內(nèi)容破壞原有布局的高度涝滴。
3) visibility:hidden 使生成的內(nèi)容不可見胶台，并允許可能被生成內(nèi)容蓋住的內(nèi)容可以進行點擊和交互;
4）通過 content: " "生成內(nèi)容作為最后一個元素，至于content里面是點還是其他都是可以的诈唬，例如oocss里面就有經(jīng)典的 content:" ",有些版本可能content 里面內(nèi)容為空,firefox直到7.0 content:"" 仍然會產(chǎn)生額外的空隙铸磅；
5）zoom：1 觸發(fā)IE hasLayout。
通過分析發(fā)現(xiàn)阅仔，除了clear：both用來閉合浮動的，其他代碼無非都是為了隱藏掉content生成的內(nèi)容,這也就是其他版本的閉合浮動為什么會有font-size：0, line-height：0空民。
*/
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /* IE6羞迷、7的兼容性問題 */
}
/* 等價于 */
.clearfloat:after { display:block; clear:both; content:""; visibility:hidden; height:0 }
.clearfloat{ zoom:1; }
</style>
<body>
<!-- 方法1 -->
<div class="div1">
<div class="left">Left1</div>
<div class="right">Right1</div>
<div class="clear"></div> <!-- 缺點: 添加一個額外的 div 標簽 -->
</div>
<div class="div2">方法1: 增加一個空 div, 將浮動元素 "擠到" 父元素中</div>
<!-- 方法2 -->
<div class="div1 overflow"> <!-- 缺點：會隱藏超出父元素的部分, 有時候這并不是預期的效果 -->
<div class="left">Left2</div>
<div class="right">Right2</div>
</div>
<div class="div2">方法2: 在父元素里增加 overflow: hidden</div>
<!-- 方法3 -->
<div class="div1 clearfix"> <!-- class="div1 clearfloat" 也可以 -->
<div class="left">Left3</div>
<div class="right">Right3</div>
</div>
<div class="div2">方法3: 使用偽類 :after (推薦)</div>
</body>
</html>
清除浮動的三種方法.png
