当前位置:首页 > DIV+CSS实例 > 正文

DIV+CSS网页布局技巧实例16:清除浮动

作者:不详 来源:aa25收集 【 】 浏览: 修改日期:2008-06-18 我要评论(14)     

一个非常常见的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布局技巧

更多评论(14)..会员评论

tianyingeva(119.145.*.*) 发表于:2014-03-11 10:09:54
老大!那个广告挡住了好多内容啊!能不能移动到另一地方?可以的话我愿意给你生儿子!
haoke(58.39.*.*) 发表于:2013-07-23 22:52:54
看了一小部分你的网站,真心的感觉不错哦~~准备把你网站看一遍,应为div+css布局,一直是头痛的问题,要非常细心,但是平常搞开发又不得不遇到,希望按照你的教程看完后有个质的飞跃,顶~!!!
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是清除浮动

出差旅游免费预订酒店

【视频教程】新手常见问题