DIV+CSS网页布局技巧实例16：清除浮动
作者:不详 来源:aa25收集 【大 中 小】 浏览: 修改日期：2008-06-18 我要评论(12)
一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。
通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》。
上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。
上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》
本人的方法是在样式表中加入这句代码：
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}
然后在页面中需要清除浮动的地方加入：
<br class="clearfloat" /><!-- 用于清除浮动的元素 -->
（如果您觉得本站不错，请告诉身边的朋友，或转载到论坛、百度知道、贴吧等，记得带网址哟，不胜感激！）
〖DIV+CSS实例〗Tags: CSS 清除 浮动
所属专题：DIV布局技巧
相关文章
更多评论(12)..会员评论
- cynh28(202.158.*.*) 发表于：2011-03-09 09:07:23
- 直接用clear：both；可以吗？ 后面都如果不加上呢？
- 管理员回复：试下不就知道了
- jason2012(61.190.*.*) 发表于：2010-11-30 11:12:34
- 在父类添加 zoom:1这个属性也可以清除浮动吗
- 管理员回复：针对IE6
- faming939(119.122.*.*) 发表于：2010-07-09 09:34:37
- 那浮动又跟它们有什么联系呢？
- 管理员回复：建议去看看css样式表手册
- faming939(119.122.*.*) 发表于：2010-07-09 08:45:02
- 老师，能简易的用口语的方式解释一下块元素与内联元素的区别去作用 可以吗？谢谢。。。急
- 管理员回复：两者的代表分别是div和span，简单的说能独占一块的是块元素，默认情况下不改变文档流的是内联元素。
- faming939(121.15.*.*) 发表于：2010-07-07 10:29:39
- 管理员！浮动是什么意思呢？是不是竖的变横？横的边竖这个意思？谢谢
- 管理员回复：不是，了解浮动得先搞清楚什么是块级元素、内联元素
- faming939(121.15.*.*) 发表于：2010-07-07 08:47:16
- 管理员，你用口语的方式说float与clear的用法与区别好吗？专业术语我看不懂啊！
- 管理员回复：float是让元素浮动，clear是清除浮动
- xiaomi518(112.94.*.*) 发表于：2010-04-04 15:47:07
- 既然用overflow那么简单，怎么还需介绍<br class="clearfloat" /> ？ 是不是有什么情况overflow不能解决的？
- 管理员回复：overflow是可以，但它只能适应于该元素，如果有两列高度不相等时，那么就需要这个了。你可以尝试一下，看什么场合下用什么方法更合理
- HIDE(113.68.*.*) 发表于：2009-12-08 19:45:27
- 站长你好，如果我只用div class='cla',cla里只设置了clear:both，这样简单的代码好像也能解决，有什么不足之处吗
- 管理员回复：也可以
推荐文章
热门文章
最新图片素材
最新评论文章
推荐专题
在线交流QQ群
- 106310407(开)
- 55427134(开)
- 2993401(开)
- 30235673(开)
- 33424604(开)
- 2993401(开)
- 161512108(开)
- 161510519(开)
- 158375021(开)
- 155858414(开)
- 143309878(开)
- 16373807(开)
- 129098721(开)
- 123473199(开)
- 146991009(开)
- 135792800(开)