本文內容概要：

1 上週作業講解

2 浮動之後的特性

3 如何清浮動

4 例項操作

上週我們講解了如何去實現頁面的簡單佈局，用了三種基本的CSS選擇器來控制標籤的樣式，同時通過盒模型為每個標籤設定了大小與位置，最後為了讓多個塊元素展示在同一行，我們講解了浮動操作。那今天我們繼續浮動這個話題，來講講浮動之後發生的那些事~~~

一、上週作業講解

在講解前，我們一起來看看上週留給大家的作業，相信大家參照上週的知識點都可以把作業佈局出來，那我們一起來看看這個作業具體是怎做出來的。如果想了解作業的參考答案，請前往GitHub：https://github.com/iceswan/htmlDemo/tree/master/homework/%E6%B5%AE%E5%8A%A8%E4%BD%9C%E4%B8%9A%E8%AE%B2%E8%A7%A3%20-%20HTML5%E5%AD%A6%E5%A0%82

程式碼效果如下：

參照上面的程式碼，我們就完成了上週的作業了，但是這時候我們倘若開啟瀏覽器的控制檯去檢視每一個塊的樣式的時候，會發現一個比較奇怪的想象，我的類名為wrap的父級div裡面明明放了那麼那麼多的塊，怎麼我的高度變成了0了，這到底是怎麼一回事啊？繼續看下去就明白啦~~~

父級高度為0的效果如下：

二、浮動之後發生的那些事

浮動會導致當前元素脫離文件流，此時會對父級產生影響；

子元素浮動，父級元素會出現高度為0的現象，這個現象叫做高度塌陷；即是上圖所看到的父級高度為0的效果。

我們說這時候可以為父級標籤新增固定高度，但是在實際開發當中我們希望內容能夠撐開高度。對於不浮動的元素來說，它們是能夠撐開外部div的高度的，但是一旦浮動，也就意味著元素脫離文件流，父級div就相當於沒有了內容。這時是沒有辦法實現內容撐開高度的。此時我們需要進行清除浮動對佈局造成的一系列影響，簡稱：清浮動。所以接下來我們主要講解的就是清浮動的幾種方法以及各方法的優缺點了。

三、 清浮動的語法

我們要講解清浮動，那必然要先看看清浮動的語法到底是怎麼寫的。

清浮動的基本語法：

clear:  left  |  right  |  both  |  none  |  inherit;

程式碼解釋：

left：在左側不允許浮動元素。

right：在右側不允許浮動元素。

both：在左右兩側均不允許浮動元素。

none：預設值。允許浮動元素出現在兩側。

inherit：規定應該從父元素繼承 clear 屬性的值。

四、 清浮動操作

瞭解了主要的清浮動語法之後，我們主要要來看看清浮動的方法具體有哪些，都是怎麼去書寫的。

今天我們主要講解的清浮動方法有：空標籤清浮動、br標籤清浮動、父級div設定overflow屬性、父級元素設定浮動、after偽元素清浮動

1 空標籤清浮動

所謂的空標籤清浮動就是使用一個空的沒有存放任何內容的標籤來書寫清浮動的語句，具體程式碼如下：

<style>
        .main div {
            float: left;
            width: 200px;
            height: 200px;
            margin-right: 20px;
            background: #fcf;
        }
        .footer {
            width: 420px;
            height: 100px;
            background: red;
        }
        .clear {
            clear: both;
            /*消除預設行高的影響*/
            height: 0;
        }
</style>
<div class="wrap">
    <div class="main">
        <div>夢幻雪冰</div>
        <div>獨行冰海</div>
        <p class="clear"></p>
    </div>
    <div class="footer"></div>    
</div>

程式碼解釋：

clear：both是清除浮動的方法，height:0防止預設高度影響。

優點：通俗易懂，容易掌握。

缺點：會新增大量無語義空標籤，結構與表現未分離，不利於維護。

使用：在浮動元素末尾加一個任意空標籤，空標籤設定clear:both和height:0;

2 br標籤清浮動

藉助單標籤br來實現清浮動，具體程式碼書寫如下：

<style>
    .main div {
        float: left;
        width: 200px;
        height: 200px;
        margin-right: 20px;
        background: #fcf;
    }
    .footer {
        width: 420px;
        height: 100px;
        background: red;
    }
</style>
<div class="wrap">
    <div class="main">
        <div>HTML5學堂</div>
        <div>H5Course</div>
        <!-- br標籤自帶的屬性 -->
        <br clear="all" />
    </div>
    <div class="footer"></div>    
</div>

程式碼解釋：

優點：比空標籤方式語義稍強，程式碼量少。

缺點：結構與表現未分離，不推薦。

使用：br標籤清除浮動類似空標籤清浮動，同樣在float元素後面加一個br標籤，只不過br存在一個屬性clear只要將br標籤裡的clear屬性設定成all即可。如: clear="all"。

3 父元素設定overflow：hidden/auto

給父級div設定overflow，書寫hidden或者auto屬性值即可用於清浮動操作，程式碼如下：

<style>
    .main {
        overflow: auto / hidden;
    }
    .main div {
        float: left;
        width: 200px;
        height: 200px;
        margin-right: 20px;
        background: #fcf;
    }
    .footer {
        width: 420px;
        height: 100px;
        background: red;
    }
</style>
<div class="wrap">
    <div class="main">
        <div>HTML5學堂</div>
        <div>H5Course</div>
    </div>
    <div class="footer"></div>    
</div>

程式碼解釋：

優點：語義化沒問題，同時代碼量少。

缺點：內容多的時候，會被隱藏，無法顯示需要溢位的元素。

使用：在父級設定一個overflow：hidden即可。注意一點，不是所有設定overflow：hidden都能清除浮動。

4 父元素設定浮動

當內部子元素浮動之後，給父級元素也設定浮動來實現清浮動，具體程式碼如下：

<style>
    .main {
        float: left;
    }
    .main div {
        float: left;
        width: 200px;
        height: 200px;
        margin-right: 20px;
        background: #fcf;
    }
    .footer {
        width: 420px;
        height: 100px;
        background: red;
    }
</style>
<div class="wrap">
    <div class="main">
        <div>HTML5學堂</div>
        <div>H5Course</div>
    </div>
    <div class="footer"></div>    
</div>

程式碼解釋：

優點：語義化沒問題，同時代碼量少。

缺點：父元素的相鄰元素佈局受影響——繼續設定浮動操作，直到body為止。

使用：浮動元素的父級也設定浮動，只不過會影響其他的佈局。

5 after偽元素清浮動

藉助偽元素來實現清浮動操作，當前開發中用的最多的存在，具體程式碼如下：

<style>
    .main div {
        float: left;
        width: 200px;
        height: 200px;
        margin-right: 20px;
        background: #fcf;
    }
    .footer {
        width: 420px;
        height: 100px;
        background: red;
    }
    .clearfix:after {
        clear:both;
        display:block;
        height:0;
        content:"200B";
    }
    .clearfix {
        *zoom:1;
    }
</style>
<div class="wrap">
    <div class="main clearfix">
        <div>HTML5學堂</div>
        <div>H5Course</div>
    </div>
    <div class="footer"></div>    
</div>

程式碼解釋：

優點：語義化和結構都沒問題。

缺點：複用方式不當，會造成程式碼量增加。

相容：由於IE6-7不支援after，使用zoom:1 觸發hasLayout。

核心程式碼:

.clearfix:after {
    content:"200B"; 
    display:block; 
    height:0; 
    clear:both;
}
.clearfix {
    *zoom:1; 
}

原理解釋：

1) display: block; 使偽元素的展示特性以塊級元素顯示，它預設的展示特性是行元素的展示特性。

2) height: 0; 避免生成內容破壞原有佈局的高度。

3) Unicode: 字元裡有一個“零寬度空格”，也就是U+200B，這個字元本身是不可見的。

4) zoom: 1; 由於IE6-7不支援:after，使用zoom:1觸發hasLayout。

我們今天對於清浮動操作的5種方法就是講解到這裡了，大家可以照著我們給出的程式碼例子去敲一敲程式碼，看一下自己敲的效果，即能夠明白這些方法的使用了。

五、課堂案例講解

學完今天講解完的清浮動的5種方法之後，大家一起來實現一個佈局練習吧，小編這裡主要就使用父級元素這種方法來操作了，感興趣的可以把每一種方法都用一用。一起來看看這個案例吧。

<!DOCTYPE  html>
<html>
<head>
  <meta  charset="utf-8">
  <title>父級浮動</title>
  <link  rel="stylesheet"  href="reset.css">
  <style>
    /*一級佈局*/
    .wrap  {
      width:  540px;
      height:  540px;
      margin:  0  auto;
    }
    .div1,.div2  {
      width:  540px;
      height:  270px;
    }
    /*二級佈局*/
    .sdiv1  {
      float:  left;
      width:  135px;
      height:  270px;
      background:  #008000;
    }
    .sdiv2  {
      float:  left;
      width:  270px;
      height:  270px;
    }
    .sdiv3  {
      float:  left;
      width:  135px;
      height:  270px;
      background:  #808080;
    }
    .sdiv4  {
      float:  left;
      width:  200px;
      height:  270px;
      background:  #cdfffe;
    }
    .sdiv5  {
      float:  left;
      width:  340px;
      height:  270px;
      background:  #ffc0cb;
    }
    .box1  {
      height:  135px;
      background:  #ffffcd;
    }
    .sbox1  {
      float:  left;
      width:  135px;
      height:  135px;
      background:  #0000ff;
    }
    .sbox2  {
      float:  left;
      width:  135px;
      height:  135px;
      background:  #ffc0cb;
    }
  </style>
</head>
<body>
  <div  class="wrap">
    <div  class="div1">
      <div  class="sdiv1"></div>
      <div  class="sdiv2">
        <div  class="box1">
          <div  class="sbox1"></div>
          <div  class="sbox2"></div>
        </div>
        <div  class="box1"></div>
      </div>
      <div  class="sdiv3"></div>
    </div>
    <div  class="div2">
      <div  class="sdiv4"></div>
      <div  class="sdiv5"></div>
    </div>            
  </div>
</body>
</html>

程式碼的展示效果：

六、課後作業

根據今天所學的知識點，羅列出清浮動的幾種方法。

並用自己的語言，儘可能完整的描述出“浮動與清浮動”（建議整理好語言邏輯，要說什麼，先說什麼，再說什麼~~~）。