常用的幾種清除浮動的方式

為什麼要清除浮動？清除浮動主要為了解決父級元素因為子級浮動引起内部高度為0 的問題。下面介紹四種清除浮動的方式：

1、額外标簽法

使用方法：在浮動元素末尾添加一個空标簽。

例如：

<div style=”clear:both”></div>
           

優點：簡單通俗，容易書寫。

缺點：額外增添了多餘的代碼量。

2、父級元素添加overflow屬性

通過觸發BFC來清除浮動。

使用方法：給父級元素添加一個overflow屬性，其屬性值可以是hidden、scroll、auto。

例如：

overflow:hidden;
           

優點：簡潔友善。

缺點：

• hidden：會隐藏溢出部分内容。
• scroll：内容溢出時會産生滾動條。
• auto：不管内容有沒有溢出都會有滾動條。

3、使用after僞元素清除浮動

:after 方式為空元素的更新版，好處是不用單獨加标簽了。

使用方法：

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 專有 */
           

優點： 符合閉合浮動思想 結構語義化正确

缺點： 由于IE6-7不支援:after，使用 zoom:1觸發 hasLayout。

4、使用before和after雙僞元素清除浮動

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}
           

優點： 代碼更簡潔

缺點： 由于IE6-7不支援:after，使用 zoom:1觸發 hasLayout。