浮動的幾個重要性質
首先，浮動有幾個很重要的性質
- 脫標：脫離標準文檔流
- 貼邊（浮動會緊貼著浮動方向的邊
- 字圍（浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現象
- 收縮：一個浮動的元素，如果沒有設置width，那么將自動收縮為文字的寬度這點非常像行內元素。
我們也將會利用這幾個性質進行清除浮動
清除浮動的幾個方法
方法一：給浮動的元素的祖先元素加高度。
如果一個元素要浮動，那么它的祖先元素一定要有高度。高度的盒子，才能關住浮動。只要浮動在一個有高度的盒子中，那么這個浮動就不會影響后面的浮動元素。所以就是清除浮動帶來的影響了。
方法二：clear:both;
網頁制作中，高度height很少出現。為什么？因為能被內容撐高！那也就是說，剛才我們講解的方法1，工作中用的很少。
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
</div>
<div class="box2"> → 這個div寫一個clear:both;屬性
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
clear就是清除，both指的是左浮動、右浮動都要清除。意思就是：清除別人對我的影響。
這種方法有一個非常大的、致命的問題，margin失效了。兩個div之間，沒有任何的間隙了
方法三：隔墻法
在兩部分浮動元素中間，建一個墻。隔開兩部分浮動，讓后面的浮動元素，不去追前面的浮動元素。墻用自己的身體當做了間隙。
外墻法：在兩個部分之間建一個墻
<div>
<p></p>
<p></p>
<p></p>
</div>
<div class="cl h10"></div>
<div>
<p></p>
<p></p>
<p></p>
</div>
內墻法
我們發現，隔墻法好用，但是第一個div，還是沒有高度。如果我們現在想讓第一個div，自動的根據自己的兒子，撐出高度
<div>
<p></p>
<p></p>
<p></p>
<div class="cl h10"></div>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
內墻法的優點就是，不僅僅能夠讓后部分的p不去追前部分的p了，并且能把第一個div撐出高度。這樣，這個div的背景、邊框就能夠根據p的高度來撐開了。
方法四：overflow：hidden
這個屬性的本意，就是將所有溢出盒子的內容，隱藏掉。但是，我們發現這個東西能夠用于浮動的清除。
我們知道，一個父親，不能被自己浮動的兒子撐出高度，但是，如果這個父親加上了overflow:hidden；那么這個父親就能夠被浮動的兒子撐出高度了。這個現象，不能解釋，就是瀏覽器的小偏方。
并且,overflow:hidden;能夠讓margin生效。
總結
以上就是我所見到的幾種清除浮動的方法，我們在工作學習中經常會被浮動所困惑，通過這些知識，相信能幫我們更好的理解浮動，但也需要多加練習。理解浮動的深刻含義。多練多總結，就會有收獲的。
