CSS清除浮动的一些方法

sunhw0725 · 发表于 2009-12-26 10:35:03

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>

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询