技術標籤：csshtml

一、浮動
浮動元素脫離文件流，不佔據空間。

二、浮動元素引起的問題
（1）父元素的高度無法被撐開。
（2）與浮動元素同級的非浮動元素（內聯元素）會跟隨其後。
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。

示例程式碼：

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .main {
      border: 5px solid red;
    }

    .div1 {
      float: left;
      width:
 
 100px;
      height: 100px;
      background: orange;
    }

    .div2 {
      float: left;
      width: 100px;
      height: 100px;
      background: pink;
    }

    .div3 {
      float: left;
      width: 100px;
      height: 100px;
      background: blue;
    }
  </style>

  <div class="main"
 
>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>

執行效果：

三、清除浮動的方式
（1）額外標籤法
在所有浮動標籤後新增一個空標籤，定義css（clear:both;）

<div style="clear:both;"></div>

缺點：增加額外標籤，使HTML結構看起來不夠簡潔。

（2）使用overflow
給包含浮動元素的父標籤新增overflow: hidden;

.main {
      border: 5px solid red;
      overflow: hidden;
    }

（3）使用after偽類（常用）

.clearfix:after {
      /*偽元素是行內元素 正常瀏覽器清除浮動方法*/
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

    .clearfix {
      *zoom: 1;
      /*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/
    }

<div class="main clearfix">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>

清除浮動後的效果圖：