六種方法中，推薦使用第三種。

1、父級div定義 height

• 原理：手動設定父級div的height，解決了父級div無法自動獲取高度的問題。
• 缺點：只適合高度固定的佈局，如果高度和父級div不一樣時，會產生問題

<style type="text/css"> 
.box{background: red;
  /*解決程式碼*/
  height: 100px;
}
.left{
    background: blue;float: left;
    height: 100px;width:40%;
}
.right{
    background: pink;float
 
: right;
    height: 100px;width:50%;
}
.footer{background: orange;height: 50px;}
</style> 

<div class="box"> 
  <div class="left">Left</div> 
  <div class="right">Right</div> 
</div> 
<div class="footer"> </div> 

沒新增 解決程式碼 前：

新增 解決程式碼 後：

2、結尾處加空div標籤 clear:both

• 原理：先新增一個空div，再利用clear:both清除浮動，讓父級div能自動獲取到高度（新增span等inline標籤無效）
• 缺點：如果頁面浮動佈局多，就要增加很多空div，讓人感覺很不好

<style type="text/css"> 
.box{background: red;}
.left{
    background: blue;float: left;
    height: 100px;width:40%;
}
.right{
    background: pink;float: right;
    height: 100px;width:50%;
}
.clear
 
{/*解決程式碼*/clear: both;}
.footer{background: orange;height: 50px;}
</style> 

<div class="box"> 
  <div class="left">Left</div> 
  <div class="right">Right</div> 
  <div class="clear"></div>
  <!-- 無效：<span class="clear"></span> -->
</div> 
<!-- 不能加到這裡<div class="clear"></div> -->
<div class="footer"> </div> 

執行結果：

如果你不懂原理，改成下面這樣你就看懂了

<style type="text/css"> 
.left{
  background: blue;float: left;
  height: 100px;width:40%;
}
.right{
  background: pink;float: right;
  height: 100px;width:50%;
}
.clear{/*解決程式碼*/clear: both;background: red;}
.footer{background: orange;height: 50px;}
</style> 
<div class="left">Left</div> 
<div class="right">Right</div> 
<div class="clear">I am clear</div>
<div class="footer"></div> 

執行結果：

所以若沒有上面的div.box元素且去掉div.clear，直接可以這樣實現清除浮動

<style type="text/css"> 
.left{
  background: blue;float: left;
  height: 100px;width:40%;
}
.right{
  background: pink;float: right;
  height: 100px;width:50%;
}
.footer{/*解決程式碼*/clear: both;background: orange;height: 50px;}
</style> 

<div class="left">Left</div> 
<div class="right">Right</div> 
<div class="footer"></div> 

執行結果：

3、父級div定義 偽類:after 和 zoom

• 原理：IE8以上和非IE瀏覽器才支援:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
• 優點：瀏覽器支援好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）

推薦使用。

<style type="text/css"> 
.box{background: red;}
.left{
    background: blue;float: left;
    height: 100px;width:40%;
}
.right{
    background: pink;float: right;
    height: 100px;width:50%;
}
.footer{background: orange;height: 50px;}
/*解決程式碼*/
.clear{zoom:1;}/*為解決ie6,ie7浮動問題*/
.clear:after{  /*三者缺一不可*/
  display:block;
  clear:both;
  content:"";
}
</style> 

<div class="box clear"> 
  <div class="left">Left</div> 
  <div class="right">Right</div> 
</div> 
<div class="footer"></div> 

執行結果：

4、父級div定義 overflow:hidden/auto

• 原理：必須定義width或zoom:1,同時不能定義height，使用overflow:hidden/auto時，瀏覽器會自動檢查浮動區域的高度.
• 缺點：
  （1）overflow:hidden:不能和position一起用，因為超出的尺寸的會被隱藏。
  （2）overflow:auto:內部寬高超過父級div時，會出現滾動條。

<style type="text/css"> 
.box{background: red;
  /*解決程式碼*/
  width:100%;
  /*或 overflow:auto*/
  overflow:hidden;
}
.left{
    background: blue;float: left;
    height: 100px;width:40%;
}
.right{
    background: pink;float: right;
    height: 100px;width:50%;
}
.footer{background: orange;height: 50px;}
</style> 

<div class="box"> 
  <div class="left">Left</div> 
  <div class="right">Right</div> 
</div> 
<div class="footer"></div> 

執行結果：同上

5、大家一起浮動

• 原理：大家都設為float,所有程式碼一起浮動，就變成了一個整體
• 缺點：會產生新的浮動問題。

<style type="text/css"> 
.box{background: red;
  /*解決程式碼*/
  float: left;
  width: 100%;
}
.left{
    background: blue;float: left;
    height: 100px;width:40%;
}
.right{
    background: pink;float: right;
    height: 100px;width:50%;
}
.footer{
   background: orange;height: 50px;
  /*解決程式碼*/
  float: left;
  width: 100%;
}
</style> 
<div class="box">
  <div class="left">Left</div> 
  <div class="right">Right</div> 
</div>
<div class="footer">footer</div> 

執行結果：

6、父級div定義 display:table

• 原理：將div屬性變成表格
• 缺點：會產生新的未知問題。

<style type="text/css"> 
.box{background: red;
  /*解決程式碼*/
  display:table;
  width:100%;
}
.left{
    background: blue;float: left;
    height: 100px;width:40%;
}
.right{
    background: pink;float: right;
    height: 100px;width:50%;
}
.footer{background: orange;height: 50px;}
</style> 

<div class="box"> 
  <div class="left">Left</div> 
  <div class="right">Right</div> 
</div> 
<div class="footer"> </div>