浮動的幾個重要性質

首先，浮動有幾個很重要的性質

• 脫標：脫離標準文件流
• 貼邊（浮動會緊貼著浮動方向的邊
• 字圍（浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現象
• 收縮：一個浮動的元素，如果沒有設定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生效。

總結

以上就是我所見到的幾種清除浮動的方法，我們在工作學習中經常會被浮動所困惑，通過這些知識，相信能幫我們更好的理解浮動，但也需要多加練習。理解浮動的深刻含義。多練多總結，就會有收穫的。