CSS清除浮动的一些方法
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">
<!--
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FFC;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clear{clear:both;}
-->
</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">
<!--
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
-->
</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">
<!--
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
-->
</style>
</head>
<body>
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
</body>
</html>
PS：第三种方法请在FF下测试。大家都用哪种方法呢?
