答案：先看一下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=><BR><INPUT onclick=runCode() type=button value=运行代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</SPAN></P><SPAN><P><SPAN>很简单很方便吧？不过还有一个缺点，占了一行的空间。怎么将br设置成不占行空间呢？<BR>br目前所知可用的css样式，影响br的外观表现</SPAN></P><P><SPAN></SPAN><SPAN class=code>display:none;<BR>line-height:0; </SPAN></P><P><SPAN>如果设置height width visiblility border background ==这些影响外观的样式都无作用<BR>仅仅可以设置行高为0，跟不换行了。<BR>不得不承认display:none;这个很鸡肋。</SPAN></P><P><SPAN>在此总结一下html中的br标签 有5种属性依次为"class", "clear", "id", "style", "title" 使用DW8的时候代码提示可以看得到了。差不多都支持这些属性吧，除了某些浏览器不支持title。 修正后的br清除浮动代码只需两行即可</SPAN></P><P><SPAN><SPAN class=code></P><P><SPAN><style> br{ line-height:0; } </style><BR><br clear="all" /></SPAN></P></SPAN><P><STRONG><FONT color=#ff0000>注意</FONT></STRONG>：使用br的方法清除浮动的缺陷是，不能帮助我们通过strict.dtd验证，可以通过xhtml1-transitional.dtd验证了。通不过strict验证的原因是html标签属性尽量少用，因为表现要与结构内容分离开来了。</P><P>然后对比一下网上的div万能清除浮动了</P><P><SPAN class=code>*<BR>{<BR> margin:0;<BR> padding:0;<BR>}<BR>html,body<BR>{<BR> height:100%;<BR> width:100%;<BR>}<BR>.clearBoth:after {<BR> content: "."; <BR> display: block; <BR> height: 0; <BR> clear: both; <BR> visibility: hidden;<BR>}<BR>.clearBoth {<BR> height:0;<BR> width:0;<BR> line-height:0;<BR> display: inline-block;<BR> overflow:hidden;<BR>}<BR>* html .clearBoth {height: 0%;}</SPAN></P><P>这种方法很多浏览器都支持。但是可以帮助我们通过strict.dtd验证，呵呵。<BR><div style="clear:both"></div> 本来最简单了，但是占用高宽。after伪类使用的非常好，可是非标准兼容的不买账了。</P><P><STRONG>两种方法的比较</STRONG>：<BR>使用<br clear="all" /> 与 <div style="clear:both"></div>方法相比代码少很多而且语义也很强， 入门使用这个简单不过了。怎么简单怎么玩。</P><P><STRONG>清楚浮动有什么好处？</STRONG> 撑高父容器了height:auto; 让布局更好看点。<BR>其实浮动也没什么不好的了，关键是浮动被滥用了就得请clear:both出来了。</P></SPAN></SPAN></pre><p>上一个：<a href="/show/528f0d771e833245.htm">纯CSS代码实现tab切换的功能</a><br/>下一个：<a href="/show/f44c617ca508c6b8.htm">Web2.0视觉风格进化论</a></p><div class="piclist">更多图片编程知识:<ul><li><a href="/show/f39b581d079075b5.htm"><img src='/upload/2006-3/200631314297838.jpg' width=105 height=105><br/>什么是Web设计-从纸张到软件</a></li><li><a href="/show/67906b0ffaef9f6e.htm"><img src='/upload/2007/9/12/20079123141877.gif' width=105 height=105><br/>Dreamweaver超级技巧之文字特效(HTML CSS)</a></li><li><a href="/show/c298be93601aacac.htm"><img src='/upload/20121014/200709132221249094djx5cmbxoc.jpg' width=105 height=105><br/>CSS网页布局入门教程2：一列自适应宽度</a></li><li><a href="/show/6bad4ad2eca99486.htm"><img src='/upload/2013111519/20130222094520715.jpg' width=105 height=105><br/>网站设计分析：无滚动条的页面屏幕抖动现象</a></li><li><a href="/show/81b2c2558ae404a6.htm"><img src='/upload/2013111519/20130203120010987.jpg' width=105 height=105><br/>web可视化设计的重要性</a></li><li><a href="/show/0b9446a2efe26a9d.htm"><img src='/upload/2013111519/20120314112510911.jpg' width=105 height=105><br/>硅谷称之为“常识”的网站设计过程原则</a></li></ul></div></div> <div class="zykmore"><script type="text/javascript" src="/js/s4.js"></script></div><div class="more"><dl><dt>更多<a href="/list/20_1.htm">html/css</a>疑问解答：</dt><dd><a target="_blank" href="/show/f0abaa265941e3c4.htm">div+css中关于ie浏览器中非啊元素的：hover的实现问题，哪位大神指点下啊</a></dd><dd><a target="_blank" href="/show/1d490bcbf845df42.htm">css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px</a></dd><dd><a target="_blank" href="/show/30fc49ffb65095fd.htm">css 属性选择器 ie6 不支持吗？</a></dd><dd><a target="_blank" href="/show/444e0d933ece33d2.htm">用css、jquery做的选项卡效果，有一个小疑问，请高手指点，代码如下：</a></dd><dd><a target="_blank" href="/show/5ec69e3e254c31bd.htm">介绍本学习css的书</a></dd><dd><a target="_blank" href="/show/274696a075ea0ad6.htm">wordpress多个CSS样式怎么调用？</a></dd><dd><a target="_blank" href="/show/ab96793bdf130c30.htm">这个div 的css是如何编写的</a></dd><dd><a target="_blank" href="/show/997828f54b6aaf75.htm">div+css中，div的右边框小于div的高度且居中，除了用背景图片，如何实现？</a></dd><dd><a target="_blank" href="/show/3fe6f53e6871f210.htm">表格立体感用CSS怎么写 我要 具体代码 写仔细 分段的 谢谢 了 兄弟 还有 下拉列表框 立体感用CSS 怎么写</a></dd><dd><a target="_blank" href="/show/a50fb65de28b11cf.htm">CSS 在一个大的DIV里面，另一个DIV怎么居中并置底。</a></dd><dd><a target="_blank" href="/show/b7069a9e10783e31.htm">dw中html文档为什么无法链接css文档</a></dd><dd><a target="_blank" href="/show/a754f4de9f8673a9.htm">设计一个小例子说明DIV+CSS的优势（例子要解释并注释）。</a></dd><dd><a target="_blank" href="/show/c4dc365c19005b78.htm">我会html css目前正在学js，打算在大三的寒假找个实习，请问应该找哪方面的实习？</a></dd><dd><a target="_blank" href="/show/2254e9fc1e4ecb65.htm">css问题，跪求大大帮忙</a></dd><dd><a target="_blank" href="/show/c0e820d5407b3236.htm">请教网页设计高手，如下图的这种css代码怎么写？</a></dd></dl></div> </div> <div id="zykleft"> <div class="leftm"> <div id="logo"><a href="http://www.zzzyk.com/">站长资源库</a> <div class="clear"></div><script type="text/javascript" src="/js/i7f.js"></script></div> <script type="text/javascript" src="/js/sharen.js"></script><div class="clear"></div> <dl class="list"><dd><a href="/list/1_1.htm">asp</a></dd><dd><a href="/list/2_1.htm">php</a></dd><dd><a href="/list/3_1.htm">Delphi</a></dd><dd><a href="/list/4_1.htm">Matlab</a></dd><dd><a href="/list/5_1.htm">JSP</a></dd><dd><a href="/list/6_1.htm">Foxpro</a></dd><dd><a href="/list/7_1.htm">JS</a></dd><dd><a href="/list/8_1.htm">C/C++</a></dd><dd><a href="/list/9_1.htm">C#/ASP.NET</a></dd><dd><a href="/list/10_1.htm">VC++</a></dd><dd><a href="/list/11_1.htm">JAVA</a></dd><dd><a href="/list/12_1.htm">VB</a></dd><dd><a href="/list/13_1.htm">汇编语言</a></dd><dd><a href="/list/20_1.htm">html/css</a></dd><dd><a href="/list/21_1.htm">CGI</a></dd><dd><a href="/list/23_1.htm">XML/UML</a></dd><dd><a href="/list/24_1.htm">wap</a></dd><dd><a href="/list/27_1.htm">网站相关</a></dd><dd><a href="/list/60_1.htm">网页素材</a></dd><dd><a href="/list/70_1.htm">python</a></dd><dd><a href="/list/71_1.htm">微信小程序</a></dd><dd><a href="/list/72_1.htm">thinkphp</a></dd></dl><dl class="notice">如果你遇到<a href="/default.htm">编程学习</a>难题：<br/>访问www.zzzyk.com 试试</dl> </div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s5.js"></script></dt></dl></div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s6.js"></script></dt></dl></div> </div></div> <div class="clear"></div> <div class="bdshare"> <script type="text/javascript" src="/js/share.js"></script> </div> <div class="clear"></div> <div class="foot">CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved<br/>部分文章来自网络，<script type="text/javascript" src="/images/my.js"></script> </div> </body> </html>
先看一下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=><BR><INPUT onclick=runCode() type=button value=运行代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</SPAN></P><SPAN><P><SPAN>很简单很方便吧？不过还有一个缺点，占了一行的空间。怎么将br设置成不占行空间呢？<BR>br目前所知可用的css样式，影响br的外观表现</SPAN></P><P><SPAN></SPAN><SPAN class=code>display:none;<BR>line-height:0; </SPAN></P><P><SPAN>如果设置height width visiblility border background ==这些影响外观的样式都无作用<BR>仅仅可以设置行高为0，跟不换行了。<BR>不得不承认display:none;这个很鸡肋。</SPAN></P><P><SPAN>在此总结一下html中的br标签 有5种属性依次为"class", "clear", "id", "style", "title" 使用DW8的时候代码提示可以看得到了。差不多都支持这些属性吧，除了某些浏览器不支持title。 修正后的br清除浮动代码只需两行即可</SPAN></P><P><SPAN><SPAN class=code></P><P><SPAN><style> br{ line-height:0; } </style><BR><br clear="all" /></SPAN></P></SPAN><P><STRONG><FONT color=#ff0000>注意</FONT></STRONG>：使用br的方法清除浮动的缺陷是，不能帮助我们通过strict.dtd验证，可以通过xhtml1-transitional.dtd验证了。通不过strict验证的原因是html标签属性尽量少用，因为表现要与结构内容分离开来了。</P><P>然后对比一下网上的div万能清除浮动了</P><P><SPAN class=code>*<BR>{<BR> margin:0;<BR> padding:0;<BR>}<BR>html,body<BR>{<BR> height:100%;<BR> width:100%;<BR>}<BR>.clearBoth:after {<BR> content: "."; <BR> display: block; <BR> height: 0; <BR> clear: both; <BR> visibility: hidden;<BR>}<BR>.clearBoth {<BR> height:0;<BR> width:0;<BR> line-height:0;<BR> display: inline-block;<BR> overflow:hidden;<BR>}<BR>* html .clearBoth {height: 0%;}</SPAN></P><P>这种方法很多浏览器都支持。但是可以帮助我们通过strict.dtd验证，呵呵。<BR><div style="clear:both"></div> 本来最简单了，但是占用高宽。after伪类使用的非常好，可是非标准兼容的不买账了。</P><P><STRONG>两种方法的比较</STRONG>：<BR>使用<br clear="all" /> 与 <div style="clear:both"></div>方法相比代码少很多而且语义也很强， 入门使用这个简单不过了。怎么简单怎么玩。</P><P><STRONG>清楚浮动有什么好处？</STRONG> 撑高父容器了height:auto; 让布局更好看点。<BR>其实浮动也没什么不好的了，关键是浮动被滥用了就得请clear:both出来了。</P></SPAN></SPAN></pre><p>上一个：<a href="/show/528f0d771e833245.htm">纯CSS代码实现tab切换的功能</a><br/>下一个：<a href="/show/f44c617ca508c6b8.htm">Web2.0视觉风格进化论</a></p><div class="piclist">更多图片编程知识:<ul><li><a href="/show/f39b581d079075b5.htm"><img src='/upload/2006-3/200631314297838.jpg' width=105 height=105><br/>什么是Web设计-从纸张到软件</a></li><li><a href="/show/67906b0ffaef9f6e.htm"><img src='/upload/2007/9/12/20079123141877.gif' width=105 height=105><br/>Dreamweaver超级技巧之文字特效(HTML CSS)</a></li><li><a href="/show/c298be93601aacac.htm"><img src='/upload/20121014/200709132221249094djx5cmbxoc.jpg' width=105 height=105><br/>CSS网页布局入门教程2：一列自适应宽度</a></li><li><a href="/show/6bad4ad2eca99486.htm"><img src='/upload/2013111519/20130222094520715.jpg' width=105 height=105><br/>网站设计分析：无滚动条的页面屏幕抖动现象</a></li><li><a href="/show/81b2c2558ae404a6.htm"><img src='/upload/2013111519/20130203120010987.jpg' width=105 height=105><br/>web可视化设计的重要性</a></li><li><a href="/show/0b9446a2efe26a9d.htm"><img src='/upload/2013111519/20120314112510911.jpg' width=105 height=105><br/>硅谷称之为“常识”的网站设计过程原则</a></li></ul></div></div> <div class="zykmore"><script type="text/javascript" src="/js/s4.js"></script></div><div class="more"><dl><dt>更多<a href="/list/20_1.htm">html/css</a>疑问解答：</dt><dd><a target="_blank" href="/show/f0abaa265941e3c4.htm">div+css中关于ie浏览器中非啊元素的：hover的实现问题，哪位大神指点下啊</a></dd><dd><a target="_blank" href="/show/1d490bcbf845df42.htm">css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px</a></dd><dd><a target="_blank" href="/show/30fc49ffb65095fd.htm">css 属性选择器 ie6 不支持吗？</a></dd><dd><a target="_blank" href="/show/444e0d933ece33d2.htm">用css、jquery做的选项卡效果，有一个小疑问，请高手指点，代码如下：</a></dd><dd><a target="_blank" href="/show/5ec69e3e254c31bd.htm">介绍本学习css的书</a></dd><dd><a target="_blank" href="/show/274696a075ea0ad6.htm">wordpress多个CSS样式怎么调用？</a></dd><dd><a target="_blank" href="/show/ab96793bdf130c30.htm">这个div 的css是如何编写的</a></dd><dd><a target="_blank" href="/show/997828f54b6aaf75.htm">div+css中，div的右边框小于div的高度且居中，除了用背景图片，如何实现？</a></dd><dd><a target="_blank" href="/show/3fe6f53e6871f210.htm">表格立体感用CSS怎么写 我要 具体代码 写仔细 分段的 谢谢 了 兄弟 还有 下拉列表框 立体感用CSS 怎么写</a></dd><dd><a target="_blank" href="/show/a50fb65de28b11cf.htm">CSS 在一个大的DIV里面，另一个DIV怎么居中并置底。</a></dd><dd><a target="_blank" href="/show/b7069a9e10783e31.htm">dw中html文档为什么无法链接css文档</a></dd><dd><a target="_blank" href="/show/a754f4de9f8673a9.htm">设计一个小例子说明DIV+CSS的优势（例子要解释并注释）。</a></dd><dd><a target="_blank" href="/show/c4dc365c19005b78.htm">我会html css目前正在学js，打算在大三的寒假找个实习，请问应该找哪方面的实习？</a></dd><dd><a target="_blank" href="/show/2254e9fc1e4ecb65.htm">css问题，跪求大大帮忙</a></dd><dd><a target="_blank" href="/show/c0e820d5407b3236.htm">请教网页设计高手，如下图的这种css代码怎么写？</a></dd></dl></div> </div> <div id="zykleft"> <div class="leftm"> <div id="logo"><a href="http://www.zzzyk.com/">站长资源库</a> <div class="clear"></div><script type="text/javascript" src="/js/i7f.js"></script></div> <script type="text/javascript" src="/js/sharen.js"></script><div class="clear"></div> <dl class="list"><dd><a href="/list/1_1.htm">asp</a></dd><dd><a href="/list/2_1.htm">php</a></dd><dd><a href="/list/3_1.htm">Delphi</a></dd><dd><a href="/list/4_1.htm">Matlab</a></dd><dd><a href="/list/5_1.htm">JSP</a></dd><dd><a href="/list/6_1.htm">Foxpro</a></dd><dd><a href="/list/7_1.htm">JS</a></dd><dd><a href="/list/8_1.htm">C/C++</a></dd><dd><a href="/list/9_1.htm">C#/ASP.NET</a></dd><dd><a href="/list/10_1.htm">VC++</a></dd><dd><a href="/list/11_1.htm">JAVA</a></dd><dd><a href="/list/12_1.htm">VB</a></dd><dd><a href="/list/13_1.htm">汇编语言</a></dd><dd><a href="/list/20_1.htm">html/css</a></dd><dd><a href="/list/21_1.htm">CGI</a></dd><dd><a href="/list/23_1.htm">XML/UML</a></dd><dd><a href="/list/24_1.htm">wap</a></dd><dd><a href="/list/27_1.htm">网站相关</a></dd><dd><a href="/list/60_1.htm">网页素材</a></dd><dd><a href="/list/70_1.htm">python</a></dd><dd><a href="/list/71_1.htm">微信小程序</a></dd><dd><a href="/list/72_1.htm">thinkphp</a></dd></dl><dl class="notice">如果你遇到<a href="/default.htm">编程学习</a>难题：<br/>访问www.zzzyk.com 试试</dl> </div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s5.js"></script></dt></dl></div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s6.js"></script></dt></dl></div> </div></div> <div class="clear"></div> <div class="bdshare"> <script type="text/javascript" src="/js/share.js"></script> </div> <div class="clear"></div> <div class="foot">CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved<br/>部分文章来自网络，<script type="text/javascript" src="/images/my.js"></script> </div> </body> </html>