CSS清除浮動float方法總結

使用浮動形成的BUG：

使用浮動前：（子節點是將父節點撐開了）

代碼以下

1 <div class="box">
2     <div class="d1">1</div>
3     <div class="d2">2</div>
4 </div>   

 5 .box{
 6  border: 1px solid black；
 8  margin: 50px auto;
 9  padding: 50px;
10  color: #fff;
11 }
12 .d1{
13  float: left;
14  background: purple;
15  width: 100px;
16  height: 100px;
17 }
18 .d2{
19  float: left;
20  background: #9c3;
21  width: 100px;
22  height: 100px;
23 }

 

首先說明現象：我沒有給父節點設置高度，在給子div設置float:left後，出現以下BUG:

1.父節點的margin屬性失效  2.子節點沒有將父節點撐開 

那麼，咱們該怎麼解決這樣由浮動形成的bug呢？

三種方法：

1、:after的3行代碼（最高大上的方法,寫情書的感受喲）

原理：利用:after和:before在元素內插入兩個元素塊（其實就是在節點自己構造出兩個存在於Render Tree的節點），從而達到清除浮動的效果。

代碼以下:（有點三行情書的意思。。嘿嘿）

.box:after{ clear: both; content: ''; display: block;
}

 

清除後效果:(實現父節點被撐開,子節點浮動效果)

 

 2、添加新的節點，使用clear:both方法（跟:after大同小異，實現上略有區別）

先看代碼：

<div class="box">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="clc"></div>
</div>

.clc{ clear: both;
}

我們就在父節點中增長一個節點，而後在該節點中設置clear:both屬性，就能夠清除浮動了。

3、在父節點上設置一個新類名，而後在類名css中設置overflow:auto

先看代碼：

<div class="box over-flow">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <!-- <div class="clc"></div> -->
</div>    

.over-flow{ overflow: auto;
}

 

這樣也能夠清除浮動，其原理是使用overflow屬性來清除浮動，overflow有三個值：auto| hidden | visible，咱們可使用 hidden和 

auto來清除浮動，但絕不能夠使用 visible 清除浮動，使用這個值達不到效果。

 

浮動產生Bug緣由：

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

 

總結：今天在這裏總結了三種比較常見的清除浮動的方法，對於瀏覽器來講，也並非每種均可以很好的兼容，因此各位在使用這三種方法

的時候仍是看實際效果爲主。