css清除浮动的方法总结与选择
作者:dudo 来源:dudo blog 时间:2008-06-06 12:58:00
很多人都有研究闭合浮动元素的问题,但是解决方法却不一样,也并不是每一种方法都尽善尽美。闭合浮动元素(或者叫清除浮动)是web标准设计中经常会遇到的一个问题,因此,这里我想总结一下目前经常用到的几种方法,并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。
问题的提出:
最简单的一种情形就是我们把一个小的、固定宽度的div元素(比如导航、引用等)和其他元素内容一起包含在一个大的div中。比如下面这段代码:
<div id="outer">
<div id="inner"> <h2>A Column</h2> </div>
<h1>Main Content</h1>
<p>Lorem ipsum</p>
</div>
我们可以为“#inner”设定一个宽度值(比如说20%),但是由于div是块级元素,即使我们设定了宽度,其后面的内容也只能在下一行中显示,除非我们给它设定一个浮动属性(无论是向左浮动或者向右浮动)。那么此时会产生我们上面提到的问题了。
如果“#inner”的宽度和高度都比“#outer”小,这不会有问题。但是,如果“#inner”的高度超过了“#outer”,那么的底部就会超出“#outer”的底部。这是因为我们为“#inner”设定了float属性后,它就会脱离的文本流,无论其宽度和高度怎么变化都不会使“#outer”跟随变化。
例一:未清除浮动时的布局表现
在这个例子中,最开始由于“#inner”的高度小于“#outer”所以不会有问题,但是当你点击“加长”后你会发现“#inner”的底边已经超出了“#outer”的范围,而“#outer”没有发生改变。这就是我们所提到的“清除浮动(闭合浮动元素)”或者是“闭合浮动”问题
解决办法:
1)额外标签法
第一个,也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签,典型的做法就是使用类似
<br style="clear:both;" />
或者使用
<div style="clear:both;"></div>
这种办法通过增加一个HTML元素迫使外部容器撑开。不过这个办法会增加额外的标签使HTML结构看起来不够简洁。
例二:使用空div闭合浮动元素
P.S. 我发现在Internet Explorer中(无论是6还是7)<br style="clear:both" />可以清除浮动,但是不能闭合浮动元素,在Firefox中就没有这个问题,不知道是什么原因?!
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
如何在Access报表中每隔N行显示一条粗线
Refactoring HTML 书评
Access与Flash的结合应用
网址站的2.0玩法
MySQL中如何定义外键
ASP脚本循环语句
asp如何遍历目录及目录下的文件?
技巧和诀窍:用Silverlight支持全屏模式
![](https://img.aspxhome.com/file/UploadPic/20079/23/2007923124244610s.jpg)
一个简单的像素画小工具
WEB页面工具语言XML应用分类之运用
服务器XMLHTTP(Server XMLHTTP in ASP)基础
设计手机端应用时的一些建议
![](https://img.aspxhome.com/file/UploadPic/20115/14/01-52s.jpg)
js游戏 俄罗斯方块 源代码
![](https://img.aspxhome.com/file/UploadPic/20081/24/200812414337986s.jpg)
oracle下加密存储过程的方法
怎么样在网页上读取远程xml的数据
怎样管理好css样式
Oracle AS关键字 提示错误
![](https://img.aspxhome.com/file/UploadPic/20114/18/2011418124219325s.jpg)
ACCESS中Field对象的标题属性
一个jquery日期选取插件源码
![](https://img.aspxhome.com/file/UploadPic/20101/11/2009126213743-92s.png)