clear:both 的作用介紹

Clear:both;其實就是利用清除浮動來把外層的div撐開，所以有時候，我們在將內部div都設置成浮動之可以采用通過Hack實現，感興趣的朋友可以參考下

 

如：

復制代碼 代碼如下:
<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="clear:both;"></div>
</div>

你可以將此部分代碼放到一個HTML頁面看看效果，然後在去掉”<div style="clear:both;"></div>”看一下效果,就知道這句話的作用了。

如圖：

（1）有clear:both的
（2）無clear:both的

這樣看，應該就一目了然了：原來後邊的Clear:both;其實就是利用清除浮動來把外層的div撐開，所以有時候，我們在將內部div都設置成浮動之。可以采用通過Hack實現：

復制代碼 代碼如下:
<style>
.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
}
* html .clearfix{zoom: 1;}
*:first-child + html .clearfix{zoom: 1;}
</style>
<div class="clearfix" style="border: 2px solid red;">
<div style="float: left; width: 80px; height: 80px; border: 1px solid blue;">
TEST DIV</div>
</div>

裡邊的原理：
（1）、首先是利用:after這個偽類來兼容FF、Chrome等支持標准的浏覽器。
:after偽類IE不支持，它用來和content屬性一起使用設置在對象後的內容，例如：
a:after{content:"(link)";}
這個CSS將會讓a標簽內的文本後邊加上link文本文字。
（2）、利用“* html”這個只有IE6認識的選擇符，設置縮放屬性“zoom: 1;”實現兼容IE6。
（3）、利用“*:first-child + html”這個只有IE7認識的選擇符，設置縮放屬性“zoom: 1;”實現兼容IE7。