|
先看一下br怎么玩轉“清除浮動”了。使用以下代碼
<br clear="all" />
以下是代碼效果演示：
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
很簡單很方便吧？不過還有一個缺點，占了一行的空間。怎么將br設置成不占行空間呢？
br目前所知可用的css樣式，影響br的外觀表現(xiàn)
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標簽屬性盡量少用，因為表現(xiàn)要與結構內(nèi)容分離開來了。
然后對比一下網(wǎng)上的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出來了。
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2732414-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2007/4576.asp 
出處：藍色理想
責任編輯：moby
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
