网页制造技巧：br玩转肃清浮动-HTML教程-爱易网页

网页制造技巧：br玩转肃清浮动

日期：2013-11-09　浏览次数：20691 次

先看一下br怎样玩转“清除浮动”了。使用以下代码

以下是代码效果演示：

运转代码框

<!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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

网页制造技巧：br玩转肃清浮动

相关资料更多>

推荐阅读更多>