先看一下br怎么玩转“清除浮动”了。使用以下代码
以下是代码效果演示：
运行代码框
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
下面的这一行使用了<br clear="all" />,可以看得出来使用br标签的clear属性也能达到<div style="clear:both"></div>的效果，为什么不放弃试试更简单的呢？
br具有以下五种标准兼容的属性class, clear, id, style, title。以前只知道br是强制换行，现在知道br可以清楚浮动，真是比较汗了。尽管它不能设置样式。
已在IE5.0 IE5.5 IE6.0 IE7.0 FF Opera Netscape下测试通过。
怎么样快试试新方法吧!o(∩_∩)o
That quick brown fox jumps over the lazy dog
That quick brown fox jumps over the lazy dog
That quick brown fox jumps over the lazy dog
That quick brown fox jumps over the lazy dog
下面这行仅用了<br />
备注：使用xhtml1-transitional.dtd 过渡方法可以通过验证了。
如果是xhtml1-strict.dtd就不行了，strict要求标签属性越少越好，表现与结构分离了。
That quick brown fox jumps over the lazy dog
That quick brown fox jumps over the lazy dog
That quick brown fox jumps over the lazy dog
That quick brown fox jumps over the lazy dog
That quick brown fox jumps over the lazy dog
That quick brown fox jumps over the lazy dog
That quick brown fox jumps over the lazy dog
That quick brown fox jumps over the lazy dog
两个同样左浮动的div之间仅加一个<br / >
[ DISCUZ_CODE_1 ]
两个同样左浮动的div之间仅加一个<br / >
[ DISCUZ_CODE_2 ]
两个同样左浮动的div之间加一了个<br clear="all" / >
[ DISCUZ_CODE_3 ]
两个同样左浮动的div之间仅加一个<br clear="all" / >
[ DISCUZ_CODE_4 ]
http://validator.w3.org/check?uri=referer" rel="external"> src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" width="88" height="31" />
http://jigsaw.w3.org/css-validator/" rel="external">
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" width="88" height="31" style="border:0;width:88px;height:31px" />
Powered by hero4u 制作人：mailto:webmaster@hero4u.cn" title="发送邮件或联系QQ：20122624">王赟
版权所有Copyringht©2007 企业名称
建议使用1024×768分辨率以达到最佳浏览效果
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
很简单很方便吧？不过还有一个缺点，占了一行的空间。怎么将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验证，呵呵。
本来最简单了，但是占用高宽。after伪类使用的非常好，可是非标准兼容的不买账了。
两种方法的比较：
使用
与
方法相比代码少很多而且语义也很强， 入门使用这个简单不过了。怎么简单怎么玩。
清楚浮动有什么好处？ 撑高父容器了height:auto; 让布局更好看点。
其实浮动也没什么不好的了，关键是浮动被滥用了就得请clear:both出来了。
注意：使用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验证，呵呵。
本来最简单了，但是占用高宽。after伪类使用的非常好，可是非标准兼容的不买账了。
两种方法的比较：
使用
与
方法相比代码少很多而且语义也很强， 入门使用这个简单不过了。怎么简单怎么玩。
清楚浮动有什么好处？ 撑高父容器了height:auto; 让布局更好看点。
其实浮动也没什么不好的了，关键是浮动被滥用了就得请clear:both出来了。