br玩转清除浮动|clear:both如何清除浮动
先看一下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://www.35ui.cn rel="external"><img
src="http://www.35ui.cn"
alt="Valid XHTML 1.0 Strict" width="88" height="31" /></a> </p>
<p>
<a href="http://www.35ui.cn" rel="external">
<img
src="http://www.35ui.cn/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=2899884%26Site=http://www.35.cn%26Menu=yes" title="在线联系QQ:289988244">hero4u</a> 制作人:<a href="mailto:china@35ui.cn" title="发送邮件或联系QQ:289988244">效铭</a></p>
<p>
版权所有Copyringht©2007 企业名称 </p>
<p>建议使用1024×768分辨率以达到最佳浏览效果</p>
</div>
</body>
</html>
很简单很方便吧?不过还有一个缺点,占了一行的空间。怎么将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出来了。
<style> br{ line-height:0; } </style>
<br clear="all" />
上一条: css公用样式|css公用样式让网页制作更简单
下一条: 网页倒计时代码|js倒计时代码