清除浮動方法
方法一：使用帶clear屬性的空元素

在浮動元素后使用一個空元素如<div class="clear"></div>，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動。亦可使用<br class="clear" />或<hr class="clear" />來進行清理。

CSS Code復制內容到剪貼板

.news {   
  background-color: gray;   
  border: solid 1px black;   
  }   
  
.news img {   
  float: left;   
  }   
  
.news p {   
  float: rightright;   
  }   
  
.clear {   
  clear: both;   
  }  

XML/HTML Code復制內容到剪貼板

<div class="news">  
<img src="news-pic.jpg" />  
<p>some text</p>  
<div class="clear"></div>  
</div>  

優點：簡單，代碼少，瀏覽器兼容性好。
缺點：需要添加大量無語義的html元素，代碼不夠優雅，后期不容易維護。

方法二：使用CSS的overflow屬性

給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動，另外在 IE6 中還需要觸發 hasLayout ，例如為父元素設置容器寬高或設置 zoom:1。在添加overflow屬性后，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。

CSS Code復制內容到剪貼板

.news {   
  background-color: gray;   
  border: solid 1px black;   
  overflow: hidden;   
  *zoom: 1;   
  }   
  
.news img {   
  float: left;   
  }   
  
.news p {   
  float: rightright;   
  }  

XML/HTML Code復制內容到剪貼板

<div class="news">  
<img src="news-pic.jpg" />  
<p>some text</p>  
</div>  

方法三：給浮動的元素的容器添加浮動

給浮動元素的容器也添加上浮動屬性即可清除內部浮動，但是這樣會使其整體浮動，影響布局，不推薦使用。

方法四：使用鄰接元素處理

什么都不做，給浮動元素后面的元素添加clear屬性。