先看一下br怎么玩转“清除浮动”了。使用以下代码
复制内容到剪贴板
代码:
<br clear="all" />以下是代码效果演示
提示：您可以先修改部分代码再运行
很简单很方便吧？不过还有一个缺点，占了一行的空间。怎么将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清除浮动代码只需两行即可
复制内容到剪贴板
代码:
<style> br{ line-height:0; } </style>
<br clear="all" />注意：使用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出来了。
转载请注明出处, 谢谢合作! 原文地址:
http://www.10kuai.cn/br.html
[
本帖最后由 hero4u 于 2007-3-31 16:26 编辑 ]
