首页/CSS代码外包/br玩转清除浮动|clear:both如何清除浮动

br玩转清除浮动|clear:both如何清除浮动

发布-xiaoming | 浏览量-

先看一下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>下面的这一行使用了&lt;br clear="all" /&gt;,可以看得出来使用br标签的clear属性也能达到&lt;div style="clear:both"&gt;&lt;/div&gt;的效果,为什么不放弃试试更简单的呢? </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>下面这行仅用了&lt;br /&gt;</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之间仅加一个&lt;br / &gt;</p>
   <p>[ DISCUZ_CODE_1 ]</p>
</div>
<br />
<div style="float:left;width:400px;height:200px;border:1px solid #333333;">
   <p>两个同样左浮动的div之间仅加一个&lt;br / &gt;</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之间加一了个&lt;br clear="all" / &gt;</p>
   <p>[ DISCUZ_CODE_3 ]</p>
</div>
<br clear="all" />
<div style="float:left;width:400px;height:200px;border:1px solid #333333;">
   <p>两个同样左浮动的div之间仅加一个&lt;br clear="all" / &gt;</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&#169;2007 企业名称&nbsp;&nbsp;</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" />

原文地址:http://www.35ui.cn/post/20110101711..html

标签clear清除浮动

上一条: css公用样式|css公用样式让网页制作更简单
下一条: 网页倒计时代码|js倒计时代码

或许你还对下面的文章感兴趣