清除浮動的三種方法

第一種：添加新的元素，應用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}

 

第二種：給父級元素定義overflow

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; //也能夠設置hidden
    zoom: 1; //zoom: 1; 處理兼容性問題
}

 

第三種：:after 方法：（注意：做用於浮動元素的父親）

先說原理：

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

HTML

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

 

清浮動

.clearfix {zoom:1;}    /*==for IE6/7 Maxthon2==*/
.clearfix: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;這樣就能夠清除以上標籤的浮動而不用加入空標籤來清除浮動。

*當一個內層元素是浮動的時候，若是沒有關閉浮動時，其父元素也就不會再包含這個浮動的內層元素，由於此時浮動元素已經脫離了文檔流。也就是爲何外層不能被撐開了！