CSS清除浮动的一些方法

Await — Tue, 25 Nov 2008 03:48:49 +0000

CSS的浮动为我们的布局带来了很大的好处，利用浮动我们可以很方便的写出各种版式。但浮动同时也带来很多问题；这些问题基本上都因为没有及时的或者在适当的位置清楚浮动。下面来说下常用的清除浮动方法：

一：用空标签

这是最常见的一种方法了。通过一个内容为空的标签来清除浮动。这个标签可以是DIV、P、Hr…。理论上可以是任何标签。

这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动，并为其定义CSS代码：clear:both。这种方法的弊端在于增加了无意义的结构元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <title>CSS清除浮动的一些方法</title> <style type="text/css">  </style> </head> <body> <div id="layout"> <div id="left">Left</div> <div id="right">Right</div> <div class="clear"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

二：使用overflow属性

这种方法有效地解决了通过添加空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：”overflow:auto”，即可！为了兼容IE6同时要加上”zoom:1″。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <title>CSS清除浮动的一些方法</title> <style type="text/css">  </style> </head> <body> <div id="layout"> <div id="left">Left</div> <div id="right">Right</div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

三：使用after伪对象清楚浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。
使用中需注意以下几点:

该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <title>CSS清除浮动的一些方法</title> <style type="text/css">  </style> </head> <body> <div id="layout"> <div id="left">Left</div> <div id="right">Right</div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

PS：第三种方法请在FF下测试。大家都用哪种方法呢?

2011-09-24 -- 使用lesscss来编码编写css (12)
lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。 lesscss使用方法有两种：页面添加一个 less.js的文...
2011-02-17 -- 未知宽度容器的居中解决方案 (13)
如上图所示的分页，其结构如下： 1/18 上一页 1 2 3 ... 18 下一页在这个结构中，“.pagena...
2009-11-11 -- 左右两栏等高实现方法 (6)
等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简...
2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
2009-07-07 -- 如何使你的CSS样式更易阅读? (15)
在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...

您可能也喜欢：
使用lesscss来编码编写css	CSS 3.0 参考手册 (中文版)	CSS中关于背景图的应用技巧	IE6因为编码问题无法正确解析CSS文件	关于CSS的书写习惯
无觅

等待-放飞梦想 » clear

CSS清除浮动的一些方法

相关文章