圖文詳解CSS基礎清除浮動

清除浮動

盒子高度問題

在標準流中內容的高度可以撐起盒子的高度

<style>        div{            background-color: red;        }        p{            width: 200px;            height: 100px;            background-color: blue;        }</style><div>    <p></p></div>

在浮動流中浮動元素內容的高不可以撐起盒子的高

<style>        div{            background-color: red;        }        p{            float: left;            width: 200px;            height: 100px;            background-color: blue;        }</style><div>    <p></p></div>

清除浮動方式一

給前面的父盒子添加高度

範例程式碼:

<style> {     margin: 0;     padding: 0; } .box1{     background-color: red;     /這裡*/     height: 50px; } .box2{     background-color: purple; } ul{     list-style: none; } .ul01 li{     background-color: blue; } .ul02 li{     background-color: green; } ul li{     float: left; }</style><div class="box1">   <ul class="ul01">大娃二娃三娃   </ul></div><div class="box2">   <ul class="ul02">李南江極客江南江哥   </ul></div>

- 添加高度前: - 

- 添加高度後 - 

- 注意點: - 在企業開發中能不寫高度就不寫高度, 所以這種方式`不常用` ###清除浮動方式二 - 利用clear:both;屬性清除前面浮動元素對我的影響

- 範例程式碼:html

<style>{           margin: 0;           padding: 0;       }       .box1{           background-color: red;       }       .box2{           background-color: purple;           /這裡/           clear: both;           /margin無效/           margin-top: 30px;       }       ul{           list-style: none;       }       .ul01 li{           background-color: blue;       }       .ul02 li{           background-color: green;       }       ul li{           float: left;       }</style><div class="box1">   <ul class="ul01">大娃二娃三娃   </ul></div><div class="box2">   <ul class="ul02">李南江極客江南江哥   </ul></div>

- 添加clear: both;前: -  - 添加clear: both;後 -  - 注意點: - 使用clear:both之後margin屬性會失效, 所以`不常用` ###清除浮動方式三 - 在兩個有浮動子項目的盒子之間添加一個額外的區塊層級元素

- 範例程式碼:html

<style>        {           margin: 0;           padding: 0;       }       .box1{           background-color: red;       }       .box2{           background-color: purple;       }       ul{           list-style: none;       }       .ul01 li{           background-color: blue;       }       .ul02 li{           background-color: green;       }       ul li{           float: left;       }       /這裡/       .wall{           clear: both;       }       .h20{           /利用額外區塊層級元素實現margin/           height: 20px;           background-color: deepskyblue;       }</style><div class="box1">   <ul class="ul01">大娃二娃三娃   </ul></div><!--這裡--><div class="wall h20"></div><div class="box2">   <ul class="ul02">李南江極客江南江哥   </ul></div>

- 添加額外區塊層級元素前 - 

- 添加額外區塊層級元素後 -  - 注意點 - 在外牆法中可以通過設定額外標籤的高度來實現margin效果 - 搜狐中大量使用了這個技術, 但是由於需要添加大量無意義的標籤, 所以`不常用` ###清除浮動方式四 - 在前面一個盒子的最後添加一個額外的區塊層級元素

- 範例程式碼html

<style>{           margin: 0;           padding: 0;       }       .box1{           background-color: red;       }       .box2{           background-color: purple;           /margin有效/           margin-top: 20px;       }       ul{           list-style: none;       }       .ul01 li{           background-color: blue;       }       .ul02 li{           background-color: green;       }       ul li{           float: left;       }       /這裡*/       .wall{           clear: both;       }</style><div class="box1">   <ul class="ul01">大娃二娃三娃   </ul>   <!--這裡-->   <div class="wall"></div></div><div class="box2">   <ul class="ul02">李南江極客江南江哥   </ul></div>- 添加額外區塊層級元素前    -  ![](http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)- 添加額外區塊層級元素後    - ![](http://upload-images.jianshu.io/upload_images/647982-7799130801c08c6b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 注意點:
- 內牆法會自動撐起盒子的高度, 所以可以直接設定margin屬性
- 和內牆法一樣需要添加很多無意義的空標籤，有違結構與表現的分離，在後期維護中將是噩夢

###清除浮動方式五
- 什麼是overflow:hidden?
- overflow:hidden的作用是清除溢出盒子邊框外的內容

- 範例程式碼

```html.test{            width: 100px;            height: 100px;            border: 1px solid #000;            background-color: red;            overflow: hidden;}<div class="test">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>

添加overflow:hidden前

添加overflow:hidden後

如何利用overflow:hidden;清除浮動

給前面一個盒子添加overflow:hidden屬性

範例程式碼

```html<style>     {         margin: 0;         padding: 0;     }     .box1{         background-color: red;         /這裡/         overflow: hidden;          zoom:1;     }     .box2{         background-color: purple;         /margin有效/         margin-top: 20px;     }     ul{         list-style: none;     }     .ul01 li{         background-color: blue;     }     .ul02 li{         background-color: green;     }     ul li{         float: left;     }</style><div class="box1">   <ul class="ul01">大娃二娃三娃   </ul></div><div class="box2">   <ul class="ul02">李南江極客江南江哥   </ul></div>- 添加overflow:hidden;前    - ![](http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)- 添加overflow:hidden;後    - ![](http://upload-images.jianshu.io/upload_images/647982-7799130801c08c6b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 注意點:
- 由於overflow:hidden可以撐起盒子的高度, 所以可以直接設定margin屬性
- IE8以前不支援利用overflow:hidden來清除浮動, 所以需要加上一個*zoom:1;
- 實際上*zoom:1能夠觸發IE8之前IE瀏覽器的hasLayout機制
- 優點可以不用添加額外的標籤又可以撐起父元素的高度, 缺點和定位結合在一起使用時會有衝突

- *zoom:1;和_zoom:1的區別
- 這個是hack寫法，用來識別不同版本的IE瀏覽器
- _後面的屬性只有IE6能識別
- *後面的屬性 IE6 IE7能識別


###清除浮動方式六
- 給前面的盒子添加虛擬元素來清除浮動

- 範例程式碼

```html

<style>        *{            margin: 0;            padding: 0;        }        .box1{            background-color: red;        }        .box2{            background-color: purple;            /*margin有效*/            margin-top: 20px;        }        ul{            list-style: none;        }        .ul01 li{            background-color: blue;        }        .ul02 li{            background-color: green;        }        li{            float: left;        }        /*這裡*/        .clearfix:after {            /*產生內容作為最後一個元素*/            content: "";            /*使產生的元素以區塊層級元素顯示,佔滿剩餘空間*/            display: block;            /*避免產生內容破壞原有布局的高度*/            height: 0;            /*使產生的內容不可見，並允許可能被產生內容蓋住的內容可以進行點擊和互動*/            visibility: hidden;            /*重點是這一句*/            clear: both;        }        .clearfix {            /*用於相容IE, 觸發IE hasLayout*/            *zoom:1;        }</style><div class="box1 clearfix">    <ul class="ul01">        <li>大娃</li>        <li>二娃</li>        <li>三娃</li>    </ul></div><div class="box2">    <ul class="ul02">        <li>李南江</li>        <li>極客江南</li>        <li>江哥</li>    </ul></div>

添加虛擬元素前

添加虛擬元素後

注意點:

本質上和內牆法一樣, 都是在前面一個盒子的最後添加一個額外的區塊層級元素

添加虛擬元素後可以撐起盒子的高度, 所以可以直接設定margin屬性

CSS中還有一個東西叫做偽類, 虛擬元素和偽類不是同一個東西

清除浮動方式七

給前面的盒子添加雙虛擬元素來清除浮動

範例程式碼

<style>        *{            margin: 0;            padding: 0;        }        .box1{            background-color: red;        }        .box2{            background-color: purple;            /*margin有效*/            margin-top: 20px;        }        ul{            list-style: none;        }        .ul01 li{            background-color: blue;        }        .ul02 li{            background-color: green;        }        li{            float: left;        }        /*這裡*/        .cf:before,.cf:after {            content:"";            display:table;            /*重點是這一句*/            clear:both;        }        .cf {            zoom:1;        }</style><div class="box1 clearfix">    <ul class="ul01">        <li>大娃</li>        <li>二娃</li>        <li>三娃</li>    </ul></div><div class="box2">    <ul class="ul02">        <li>李南江</li>        <li>極客江南</li>        <li>江哥</li>    </ul></div>

添加雙虛擬元素前

添加雙虛擬元素後

注意點:

添加虛擬元素後可以撐起盒子的高度, 所以可以直接設定margin屬性

Crowdsourced Security Testing道有這些方式, 原理需要學習到BFC和hasLayout才能明白

支援BFC的瀏覽器（IE8+，firefox，chrome，safari）通過建立新的BFC閉合浮動；

不支援 BFC的瀏覽器 （IE5-7），通過觸發 hasLayout 閉合浮動。