HTML5教程-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>

清除浮動方式一

• 給前面的父盒子添加高度

• 示例代碼:
  ```html

  <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>

• 
  

- 添加高度前:    - ![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-37c3591032b43be9.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240) - 添加高度後    - ![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-fcb8f6fa15c6be76.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240) - 注意點:    - 在企業開發中能不寫高度就不寫高度, 因此這種方式`不經常使用` ###清除浮動方式二 - 利用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;前:    - ![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-37c3591032b43be9.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240) - 添加clear: both;後    - ![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-7b618617223102be.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240) - 注意點:    - 使用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>
- 添加額外塊級元素前    -  ![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-37c3591032b43be9.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240) - 添加額外塊級元素後    - ![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-15566323325c738d.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240) - 注意點    - 在外牆法中能夠經過設置額外標籤的高度來實現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-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-37c3591032b43be9.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240)

- 添加額外塊級元素後
    - ![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-7799130801c08c6b.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/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-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-37c3591032b43be9.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240)


- 添加overflow:hidden;後
    - ![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-7799130801c08c6b.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/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屬性

  • 先知道有這些方式, 原理須要學習到BFC和hasLayout才能明白

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

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