浮動，CSSfloat屬性。學過的人應該知道這個屬性，平時用的應該也是很多的。特別是在N欄布局中。
但是我們會經常遇到這樣一種情況，前面的元素浮動之后會影響后面的元素，后面的元素需要用清除浮動來消滅前面元素的影響。
以前經常就是用<div style="clear:both"></div>或者<br style="clear:both" />這樣的方法，甚至於有人覺得在HTML加標簽很low，所以就用JS手動在DOM中插入這樣的清除浮動的標簽以達到清楚浮動的目的。
但是這樣就有點違背了我們提倡的結構-樣式-行為分離的原則了。
所以，我認為清除浮動應該在CSS中操作，而不是在HTML或者JS中。
第一種：overflow方法。
這是一種很神奇的方法，我以前學習CSS的時候自己摸索過這種方法，也是發現的除添加標簽外的第一種用CSS清除浮動的方法。
這種方法的也用到了hack的原則，兼容IE6。overflow在IE7+才可以用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>overflow清除浮動</title>
<style type="text/css">
div{
overflow:hidden;
background: #f00;
_zoom:1;
}
img{
float:left;
}
</style>
</head>
<body>
<div>
<img src="jike9.jpg" />
</div>
</body>
</html>
這種方法的優點是代碼量比較少
第二種方法是after偽元素選擇器法
這種方法用到了CSS-hack方法，可以看以前收集的CSS-hack匯總
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>overflow清除浮動</title>
<style type="text/css">
div{
background: #f00;
*zoom:1; /*IE6,IE7*/
}
div:after{ /*IE8+*/
content:'';
display: table;
clear:both;
}
img{
float:left;
}
</style>
</head>
<body>
<div>
<img src="jike9.jpg" />
</div>
</body>
</html>
這兩種應該算是除了添加標簽外比較常用的清除浮動的方法了。也是很好體現了結構-樣式-行為分離原則的方法了。
第三種方法是clear:both
這種方法很容易想，不管是div或者是hr都可以用，定義一個類就好