CSS之清除浮動

一、清除浮動的目的。

　　1、當一個父元素的高度不寫或為auto時，而且這個父元素內又有浮動的子元素，那么這時候該父元素的高度將不會自動適應子元素的高度，也可以說高度是0px;

　　有如下代碼：

    <div class="divp" style="width:300px; background:red; border:3px solid #000000;">
        <div style="height:300px;float:left; background-color:Green">123123</div>
    </div>

　　此代碼父元素高度不設置，而且里面又有左浮動高度為300px的子元素。實際顯示效果為：

　　　　

　　　　可以看到，父div僅僅顯示為其邊框的高度，並沒有適應其子元素的高度，要正確顯示父元素的邊框的話，此時就要清除浮動。我們在原來的代碼的基礎上加多一個<br/>以用於清除浮動，實際代碼如下：

    <div class="divp" style="width:300px; background:red; border:3px solid #000000;">
        <div style="height:300px;float:left; background-color:Green">123123</div>
        <br/ style="clear:both;" >　　//此行代碼用於清除浮動
    </div>

　　　　現在再來看看現在的效果：

　　　　

　　　　注意：清除浮動的元素要放在正確的位置上，必須緊貼着浮動元素。

　　2、布局錯位問題。

　　　　因為浮動元素脫離了標准文檔流，因此其它非浮動元素可能會受此影響而錯位。

　　　　例如有如下代碼：

<div style="border:2px solid #000; width:320px;">
        <div style="width:100px;height:100px;float:left; border:1px solod #555">左浮動元素</div>
        <div style="width:100px;height:100px;float:right; border:1px solod #AAA">右浮動元素</div>
</div>
        <div>看看我的位置</div>

　　　　理論上說來，最下面的div與上面的div沒有關系，因此會自動排到上面的div的下面一行。來看效果：

　　　　

　　　　可以看到，效果不像預期，究其原因，還是上面的父div高度不適應子浮動元素而導致，高度僅僅為邊框的高度，從而下面的div自動頂上去了，因此到此錯位

　　　　我們來改寫上面的代碼如下所示：

<div style="border:2px solid #000; width:320px;">
        <div style="width:100px;height:100px;float:left; border:1px solid #555555">左浮動元素</div>
        <div style="width:100px;height:100px;float:right; border:1px solid #AAAAAA">右浮動元素</div>
        <br style="clear:both;" />
</div>
        <div>看看我的位置</div>

　　　　上面的代碼僅僅添加了一個<br/>元素用於清除浮動，來看最終效果。

　　　　

　　　　看到效果已經正確了。

　　　　但是，如果清除浮動的元素的位置放置不正確會有什么后果呢？再來改寫下面的代碼：

<div style="border:2px solid #000; width:320px;">
        <div style="width:100px;height:100px;float:left; border:1px solid #555555">左浮動元素</div>
        <div style="width:100px;height:100px;float:right; border:1px solid #AAAAAA">右浮動元素</div>
</div>
        <br style="clear:both;" />    //稍稍調整了一下清除浮動的元素的位置
        <div>看看我的位置</div>　　
</body>

　　　　效果如下：

　　　　

　　　　可以看到，雖然下面的div的位置正確了，但是上面的父元素還是沒有適應子浮動元素的高度。

 　　今天公司的前端發給了我一個清除浮動的解決方法列表，覺得挺好的，有的甚至見都未見過。整理如下：

1. float
　　缺點：層層往上找，沒完沒了，到了body那，算是個頭  float 和 margin:0 auto; 有沖突
2. display:inline-block;
　　缺點：不能設置 margin:0 auto;
3. overflow:hidden;
　　缺點：很多JS交互特效做不了，多出去的部分隱藏了
4. 在父級內，加空DIV：clear:both; 
　　缺點：父級不能加padding，否則IE6 IE7不兼容
5. <br clear="all" />
　　缺點：每次都要加這個換行符
6. .clear:after { content: '\20'; clear: both; display: block; }
　　缺點：如果代碼多了點，也叫缺點的話……
　　此外，如果父級沒有寬，就必須為父級加上：zoom:1;用來解決IE6 IE7下的問題