br玩转清除浮动

作者：hero4u　来源：蓝色经典　发布时间：2007-05-11 16:52:00　

标签：br,clear,浮动

先看一下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;"><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清除浮动代码只需两行即可

注意：使用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出来了。

投稿

br玩转清除浮动

猜你喜欢