CSS清除浮動float的三種方法總結，爲何清浮動？浮動會有那些影響？

1、拋一塊問題磚（display： block）先看現象：

分析HTML代碼結構：


<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

分析CSS代碼樣式：

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}

這裏我沒有給最外層的DIV.outer 設置高度，可是咱們知道若是它裏面的元素不浮動的話，那麼這個外層的高是會自動被撐開的。可是當內層元素浮動後，就出現了一下影響：

（1）：背景不能顯示 （2）：邊框不能撐開 （3）：margin 設置值不能正確顯示

---

2、清楚css浮動：

方法一：添加新的元素 、應用 clear：both；

HTML：

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

CSS：

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

result： （糾正： padding不會受影響）

---

方法二：父級div定義 overflow: auto（注意：是父級div也就是這裏的 div.outer）

HTML：

<div class="outer over-flow"> //這裏添加了一個class
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <!--<div class="clear"></div>-->
</div>

CSS：

.over-flow{
    overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題
}

結果：固然是實現了！ img{display: none}; 略圖

原理：使用overflow屬性來清除浮動有一點須要注意，overflow屬性共有三個屬性值：hidden,auto,visible。咱們可使用hiddent和auto值來清除浮動，但切記不能使用visible值，若是使用這個值將沒法達到清除浮動效果，其餘兩個值均可以，其區聽說在於一個對seo比較友好，另個hidden對seo不是太友好，其餘區別我就說不上了，也不浪費時間。

---

方法三： 聽說是最高大上的方法 :after 方法：（注意：做用於浮動元素的父親）

先說原理：這種方法清除浮動是如今網上最拉風的一種清除浮動，他就是利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理相似於clear:both方法，只是區別在於:clear在html插入一個div.clear標籤，而outer利用其僞類clear:after在元素內部增長一個相似於div.clear的效果。下面來看看其具體的使用方法：

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
 .outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}/*==for FF/chrome/opera/IE8==*/

其中clear:both;指清除全部浮動；content: '.';
display:block;對於FF/chrome/opera/IE8不能缺乏，其中content（）能夠取值也能夠爲空。visibility:hidden;的做用是容許瀏覽器渲染它，可是不顯示出來，這樣才能實現清楚浮動。

最後：但不是不重要，也不是不知道！

下一標籤直接清浮動兄弟標籤浮動時，在下一標籤的屬性中直接寫入清除clear:both;
 這樣就能夠清除以上標籤的浮動而不用加入空標籤來清除浮動。

---

結語：清除浮動的方式雖然是有不少種，可是不是每種都適合你，也不是每種都能很好的兼容全部瀏覽器，因此參照你以爲最好的方式去作，我的以爲方法三不錯，不需多於的標籤，並且也能很好的兼容。再次again：當一個內層元素是浮動的時候，若是沒有關閉浮動時，其父元素也就不會再包含這個浮動的內層元素，由於此時浮動元素已經脫離了文檔流。也就是爲何外層不能被撐開了！