上篇博客列舉了浮動的幾個栗子，並且說明了浮動佈局帶來的問題，那麼如何解決呢，關於清除浮動，
解決思路有兩種：
1.利用clear屬性，清除浮動
2.使父元素容器形成BFC
先來看看如何利用clear屬性清除浮動：
語法：
clear:both | left | right
具體方法：通過在浮動元素末尾添加一個空的標籤例如：
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<br class="cb">
</div>
.child {
width: 25%;
height: 50px;
float: left;
_display: inline;
}
.cb {
clear: both;
}<div style=”clear:both”></div>，其他標籤br等亦可。
加上_display:
inline是爲了兼容IE6。
再看一個栗子這裏有兩個div均設置了左浮動：
對於CSS的清除浮動(clear)，一定要牢記：這個規則只能影響使用清除的元素本身，不能影響其他元素。
就拿上邊的例子來說，我們想讓div2移動，但卻是在div1元素的CSS樣式中使用了清除浮動，試圖通過清除div1右邊的浮動元素(clear:right;)來強迫div2下移，這是不可行的，因爲這個清除浮動是在div1中調用的，它只能影響div1，不能影響div2。
因此，要想讓div2下移，就必須在div2的CSS樣式中使用浮動。本例中div2的左邊有浮動元素div1，因此只要在div2的CSS樣式中使用clear:left;來指定div2元素左邊不允許出現浮動元素，這樣div2就被迫下移一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.div2{
width: 100px;
height: 100px;
background-color: green;
float: left;
clear:left;
}
</style>
</head>
<body>
<div>
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
</body>
</html>
那麼假如頁面中只有兩個元素div1、div2，它們都是右浮動呢？
推測一下如果要讓div2在div1下方顯示，是不是應該誒div2設置清理右浮動屬性呢？
binggo~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: red;
float: right;
}
.div2{
width: 100px;
height: 100px;
background-color: green;
float: right;
clear: right;
}
</style>
</head>
<body>
<div>
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
</body>
</html>
接下來說說清除浮動的第二種方法：
利用overflow:hidden;
我們都知道overflow:hidden;的意思是隱藏溢出元素內容的，它是怎麼可以實現清除浮動的呢?
知乎上有個作者如是說：
那麼如果 float 的元素不佔普通流位置
普通流的包含塊要根據內容高度裁切隱藏
如果高度是默認值auto
那麼不計算其內浮動元素高度就裁切
就有可能會裁掉float
這是反佈局常識的
所以如果沒有明確設定容器高情況下
它要計算內容全部高度才能確定在什麼位置hidden
浮動的高度就要被計算進去
順帶達成了清理浮動的目標
同理
overflow 非默認值
position 非默認值
float 非默認值
等都是遵循這個佈局計算思路
總之呢，意思就是：要hidden必須得有個高度，但是你float之後元素脫離文檔流，不計算它的高度就裁掉了float，所以浮動的高度要被計算進去
恩，就這樣，overflow：hidden；在父元素上使用overflow:
hidden達到清除浮動的效果，也可以是overflow: auto。可是通過overflow實現的清除浮動都有一個缺點，當子元素超出了父元素，父元素使用overflow:
hidden的話，子元素超出的部分會被隱藏；使用overflow: auto的話，父元素上會出現滾動條，最後也別忘加上zoom:
1觸發IE的hasLayout。這樣就輕鬆實現了清除浮動
方法三：
：after僞類元素的實現方式：
先說原理：利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理類似於clear:both方法，只是區別在於:clear在html插入一個div.clear標籤，而outer利用其僞類clear:after在元素內部增加一個類似於div.clear的效果。下面來看看其具體的使用方法：
<pre name="code" class="javascript"> .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;的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現清除浮動。