問題的由來：

在CSS規範中，浮動定位是脫離元素正常流的。所以，只要含有浮動元素的父容器，在顯示時不考慮子元素的位置，就當它們不存在一樣。這就造成了顯示出來，父容器好像空容器一樣。

比如下面代碼：

1 <div class="box">
2     <div style="float:left;width:100px;height:100px;"></div>
3     <div style="float:right;width:100px;height:100px"></div>
4 </div>

在瀏覽器中一運行，實際視圖是子元素顯示在父容器的外部。

解決方法一：添加空元素

在浮動元素下面添加一個非浮動的元素

代碼如下：

 1 <div class="box">
 2 　　<div style="float:left;width:100px;height:100px;"></div>
 3 　　<div style="float:right;width:100px;height:100px;"></div>
 4 　　<div class="clearfix"></div>
 5 </div>
 6 
 7 <style>
 8
 
 .clearfix{
 9     clear:both;
10 }
11 </style>

解決方法二：浮動的父容器

將父容器也改成浮動定位，這樣它就可以帶著子元素一起浮動了

代碼如下：

 1 <div class="box">
 2     <div style="float:left;width:100px;height:100px;"></div>
 3     <div style="float:right;width:100px;height:100px;"></div>
 4 </div>
 

 5 
 6 <style>
 7 .box{
 8     float:left;
 9 }
10 </style>

解決方法三：浮動元素的自動clearing

讓父容器變得可以自動"清理"（clearing）子元素的浮動，從而能夠識別出浮動子元素的位置，不會出現顯示上的差錯。

代碼如下：

 1 <div class="box">
 2 　　<div style="float:left;width:100px;height:100px;"></div>
 3 　　<div style="float:right;width:100px;height:100px;"></div>
 4 </div>
 5 
 6 <style>
 7 .box{
 8     overflow:hidden;
 9 }
10 </style>

解決方法四：通過CSS語句添加子元素，這樣就不用修改HTML代碼

就是用after偽元素的方法在容器尾部自動創建一個元素的方法

代碼如下：

 1 <div class="box">
 2 　　<div style="float:left;width:100px;height:100px;"></div>
 3 　　<div style="float:right;width:100px;height:100px;"></div>
 4 </div>
 5 
 6 <style>
 7 .box:after {
 8     content: "\0020";
 9     display: block;
10     height: 0;
11     clear: both;
12     zoom:1;
13 }
14 </style>

清除浮動的原理和方法