网页制作技巧：br玩转清除浮动

yoyo · 发表于 2007-8-17 13:04

先看一下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\"><img
      src=\"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>

owered 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

415514229 · 发表于 2009-3-31 21:32

不错呀，还有更多的没

紫衿 · 发表于 2011-8-16 09:59

楼主身体健康，万事如意！

gz-vps · 发表于 2011-8-16 10:00

来电来函..欢迎洽购...

帐号		自动登录	找回密码
密码			成为会员