網頁製作技巧：br玩轉清除浮動

浮動|技巧|網頁

先看一下br怎麼玩轉“清除浮動”了。使用以下代碼

<br clear="all" />

以下是代碼效果示範：

運行代碼框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>br玩轉清除浮動</title></head><body style="font-family:Verdana, sans-serif;font-size:12px;"><!-- 包含logo header navigator --><div><div style="float:left;width:400px;height:200px;border:1px solid #333333;"> <p>下面的這一行使用了<br clear="all" />,可以看得出來使用br標籤的clear屬性也能達到<div style="clear:both"></div>的效果，為什麼不放棄試試更簡單的呢？ </p> <p>br具有以下五種標準相容的屬性class, clear, id, style, title。以前只知道br是強制換行，現在知道br可以清楚浮動，真是比較汗了。儘管它不能設定樣式。</p> <p>已在IE5.0 IE5.5 IE6.0 IE7.0 FF Opera Netscape下測試通過。</p> <p>怎麼樣快試試新方法吧!o(∩_∩)o</p> </div><br clear="all" /><br /><p>That quick brown fox jumps over the lazy dog</p><p>That quick brown fox jumps over the lazy dog</p><p>That quick brown fox jumps over the lazy dog</p><p>That quick brown fox jumps over the lazy dog</p><hr /><div style="float:left;width:400px;height:200px;border:1px solid #333333;"> <p>下面這行僅用了<br /></p> <p>備忘：使用xhtml1-transitional.dtd 過渡方法可以通過驗證了。<br />如果是xhtml1-strict.dtd就不行了，strict要求標籤屬性越少越好，表現與結構分離了。</p></div><br /><p>That quick brown fox jumps over the lazy dog</p><p>That quick brown fox jumps over the lazy dog</p><p>That quick brown fox jumps over the lazy dog</p><p>That quick brown fox jumps over the lazy dog</p><p>That quick brown fox jumps over the lazy dog</p><p>That quick brown fox jumps over the lazy dog</p><p>That quick brown fox jumps over the lazy dog</p><p>That quick brown fox jumps over the lazy dog</p><hr /><div style="float:left;width:400px;height:200px;border:1px solid #333333;"> <p>兩個同樣左浮動的div之間僅加一個<br / ></p> <p>[DISCUZ_CODE_1]</p></div><br /><div style="float:left;width:400px;height:200px;border:1px solid #333333;"> <p>兩個同樣左浮動的div之間僅加一個<br / ></p> <p>[DISCUZ_CODE_2]</p></div><br clear="all" /><hr /><div style="float:left;width:400px;height:200px;border:1px solid #333333;"> <p>兩個同樣左浮動的div之間加一了個<br clear="all" / ></p> <p>[DISCUZ_CODE_3]</p></div><br clear="all" /><div style="float:left;width:400px;height:200px;border:1px solid #333333;"> <p>兩個同樣左浮動的div之間僅加一個<br clear="all" / ></p> <p>[DISCUZ_CODE_4]</p></div><br clear="all" /></div> <div><p><a href="http://validator.w3.org/check?uri=referer" rel="external"><imgsrc="http://www.w3.org/Icons/valid-xhtml10"alt="Valid XHTML 1.0 Strict" width="88" height="31" /></a> </p><p> <a href="http://jigsaw.w3.org/css-validator/" rel="external"> <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" width="88" height="31" style="border:0;width:88px;height:31px" /> </a></p> </div> <div id="footer" style="text-align:center;"><p>Powered by <a href="tencent://message/?uin=20122624%26Site=http://www.10kuai.cn%26Menu=yes" title="線上聯絡QQ：20122624">hero4u</a> 製作人：<a href="mailto:webmaster@hero4u.cn" title="發送郵件或聯絡QQ：20122624">王贇</a></p><p> 著作權Copyringht©2007 企業名稱  </p><p>建議使用1024×768解析度以達到最佳瀏覽效果</p> </div></body></html>

    [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

很簡單很方便吧？不過還有一個缺點，佔了一行的空間。怎麼將br設定成不佔行空間呢？
br目前所知可用的css樣式，影響br的外觀表現

display:none;
line-height:0;

如果設定height width visiblility border background ==這些影響外觀的樣式都無作用
僅僅可以設定行高為0，跟不換行了。
不得不承認display:none;這個很雞肋。

在此總結一下html中的br標籤 有5種屬性依次為"class", "clear", "id", "style", "title" 使用DW8的時候代碼提示可以看得到了。差不多都支援這些屬性吧，除了某些瀏覽器不支援title。 修正後的br清除浮動代碼只需兩行即可

<style>   br{   line-height:0;   }   </style>
<br clear="all" />

注意：使用br的方法清楚浮動的缺陷是，不能協助我們通過strict.dtd驗證，可以通過xhtml1-transitional.dtd驗證了。通不過strict驗證的原因是html標籤屬性盡量少用，因為表現要與結構內容分離開來了。

然後對比一下網上的div萬能清除浮動了

*
{
    margin:0;
    padding:0;
}
html,body
{
    height:100%;
    width:100%;
}
.clearBoth:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearBoth {
    height:0;
    width:0;
    line-height:0;
    display: inline-block;
    overflow:hidden;
}
* html .clearBoth {height: 0%;}

這種方法很多瀏覽器都支援。但是可以協助我們通過strict.dtd驗證，呵呵。
<div style="clear:both"></div>  本來最簡單了，但是佔用高寬。after偽類使用的非常好，可是非標準相容的不買賬了。

兩種方法的比較：
使用<br clear="all" /> 與 <div style="clear:both"></div>方法相比代碼少很多而且語義也很強， 入門使用這個簡單不過了。怎麼簡單怎麼玩。

清楚浮動有什麼好處？ 撐高父容器了height:auto;  讓布局更好看點。
其實浮動也沒什麼不好的了，關鍵是浮動被濫用了就得請clear:both出來了。