CSS 父元素不能閉合具有浮動屬性的子元素

浮動（Float）是頁面佈局中經常用到的技巧，但是，同時也出現了很多由於浮動引發的問題；父元素不能閉合具有浮動屬性的子元素，是這些問題中最常見且最讓新手頭痛的一個。

清除浮動常見的做法是加一個額外的標籤，然後給這個標籤加上 clear:both 的設置，追求完美的人當然不樂意這種方式，於是，便有了本文將要介紹的：不增加額外元素實現清除浮動的方法。

<style type="text/css">



/*

說明：不增加額外元素實現清除浮動（ 閉合浮動元素 Clear Floats ）

整理： CodeBit.cn ( http://www.CodeBit.cn )

*/



.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}



.clearfix {display: inline-block;}



/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */



</style>

使用時，給需要清除浮動的元素增加一個 clearfix 的 class 即可。