CSS:浮動清理，不使用 clear:both标簽 (轉)

< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>

在進行浮動布局時，大多數人都深知，在必要的地方進行浮動清理：<div style="clear:both;"></div>。

例如：

        <div style="background:#666;"> <!-- float container -->

                <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>

        </div>

此時預覽此代碼，我們會發現最外層的父元素float container,并沒有顯示。這是因為子元素因進行了浮動，而脫離了文檔流，導緻父元素的height為零。

若将代碼修改為：

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

注意，多了一段清理浮動的代碼。這是一種好的CSS代碼習慣，但是這種方法增加了無用的元素。這裡有一種更好的方法，将HTML代碼修改為：

        <div class="clearfix" style="background:#666;"> <!-- float container -->

定義CSS類，進行“浮動清理”的控制：

.clearfix:after{

content: ".";

clear: both;

height: 0;

visibility: hidden;

display: block;

}

.clearfix{

display: inline-block;    

* html .clearfix {}{height: 1%;}       

.clearfix {}{display: block;}       

此時，預覽以上代碼( 删去這種注釋   )，會發現即使子元素進行了浮動，父元素float container仍然會将其包圍，進行高度自适應。

<a href="http://www.cnblogs.com/tag/html%26%2347%3Bxhtml%26%2347%3Bxml%E4%B8%93%E6%A0%8F/feeds">#html/xhtml/xml專欄</a>

本文轉自 netcorner 部落格園部落格，原文連結： http://www.cnblogs.com/netcorner/archive/2009/01/09/2912090.html  ，如需轉載請自行聯系原作者