[zz]CSS clearfix 清除浮動

在很長一段時間裡面，如果一個容器內有浮動元素的話，我習慣在父容器閉合前加一個 clear:both 元素，用於清除浮動，使父容器撐起。如下面得例子：

<style media="all">.children {float:left;}.fixed {clear:both;}</style><div class="parent">    <div class="children">子項目</div>    <div class="children">子項目</div>    <div class="children">子項目</div>    <div class="fixed"></div></div>

但是添加一個並沒有實質內容的標籤並不符合簡化頁面結構的目的，而且在 JavaScript 操作子項目時很容易引起 bug。

如果要在不增加 fixed 元素的情況下清除 parent 容器內的浮動，我們可以利用 :after 偽類。 :after 偽類在 W3C 裡的定義是：在 :after 元素的內容末尾插入 content 的內容，這些內容預設為 inline 級。

在使用 :after 偽類後，完整的清浮動 CSS 為：

.clearfix:after {     visibility: hidden;     display: block;     font-size: 0;     content: " ";     clear: both;     height: 0;}.clearfix { display: inline-block; }html[xmlns] .clearfix { display: block; }* html .clearfix { height: 1%; }

使用上面的樣式後，只需為 parent 元素增加一個 clearfix 的class，即可去掉裡面的 fixed 子容器。並且相容目前幾乎所有的 網頁瀏覽器。

Source：http://www.codecto.com/2011/02/css-clearfix-float/