|
先看一下br怎么玩转“清除浮动”了。使用以下代码
<br clear="all" />
以下是代码效果演示：
运行代码框
[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清除浮动代码只需两行即可
<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://bbs.blueidea.com/thread-2732414-1-1.html
本文链接：http://www.blueidea.com/tech/web/2007/4576.asp 
出处：蓝色理想
责任编辑：moby
◎进入论坛网页制作、网站综合版块参加讨论
|
