清除浮動的三種方法

第一種：添加新的元素，應用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;這樣就可以清除以上標簽的浮動而不用加入空標簽來清除浮動。

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