清除浮動的方法

浮動在頁面佈局是經常會用到，但是浮動後不做任何清除浮動的處理會帶來一系列問題，這裏我總結了一些清除浮動的方法

一、給浮動元素的祖先元素設置高度

只要在一個有高度的盒子中浮動，那麼這個浮動就不會影響後面的浮動元素，也就清除了浮動帶來的影響

例：

<div class="div1">
    <ul>
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ul>
</div>
<div>
    <ul>
        <li>學習方法</li>
        <li>實戰經驗</li>
        <li>面試技巧</li>
    </ul>
</div>

這裏兩個div都沒有設置高度，讓第一個div中的li左浮動，第二個div中的li會自動去緊貼第一個div中的li，效果如下：

但是給第一個div加上高度後，就解決了這個問題，效果如下：

二、給後一個盒子加上clear:both；

網頁製作中，高度很少出現，而且比較麻煩，浮動元素後面的盒子加上clear:both;意思就是清除別人對我的影響，但是這個方法有個致命的缺陷就是：margin會失效，兩個盒子之間沒有任何間隙了。

三、隔牆法

就是在兩個盒子之間增加一個有高度的盒子（外牆法）或者在第一個有浮動元素的盒子中增加一個有高度的盒子（內牆法），達到類似一道牆的作用
例：外牆法

HTML:

<div class="div1">
   <ul>
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ul>
</div>
<div class="cl div2"></div>
<div>
    <ul>
        <li>學習方法</li>
        <li>實戰經驗</li>
        <li>面試技巧</li>
    </ul>
</div>

CSS:

.div2 {
            height: 50px;
        }
.cl {
            clear: both;
        }
li {
            float: left;
        }

例：內牆法
HTML:

<div class="div1">
    <ul>
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ul>
    <div class="cl div2"></div>
</div>

外牆法有個問題就是第一div還是沒有高度，如果想要第一個div根據自己的兒子自動撐出高度，建議使用內牆法

四、使用僞元素和 zoom 清除浮動（zoom(IE轉有屬性)可解決ie6,ie7浮動問題 ）

例：
HTML:

<div class="clearfix">
    <ul>
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ul>
</div>
<div>
    <ul>
        <li>學習方法</li>
        <li>實戰經驗</li>
        <li>面試技巧</li>
    </ul>
</div>

CSS:

.clearfix:after {
            content: '';
            height:0;
            line-height:0;
            display: block;
            visibility: hidden;
            clear: both;
        }
.clearfix {
            zoom:1;
        }
li {
            float: left;
        }

或使用雙僞元素清除浮動

.clearfix  {
                  content: "";
                  display: block;
                  clear: both;
            }
.clearfix {
                  zoom: 1;
            }

五、overflow：hidden

一個父盒子不能被自己浮動的兒子撐出高度，但是給父親加上overflow:hidden,那麼這個父盒子就能夠被浮動的兒子撐出高度了
例：
HTML:

<div class="div1">
    <ul>
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ul>
</div>
<div>
    <ul>
        <li>學習方法</li>
        <li>實戰經驗</li>
        <li>面試技巧</li>
    </ul>
</div>

  CSS:

.div1 {
            overflow:hidden;
        }