简明现代魔法 -> CSS层叠样式表 -> 清除浮动的三种方法

清除浮动的三种方法

2010-05-03

先看一下下面代码：

<style>
*{ margin:0; padding:0; font-size:14px; }
ul.nav{ background:red; list-style:none; }
ul.nav li{ float:left; background:#FF9; margin:2px 5px; }
p{ background:blue; color:#FFF; }
</style>

<ul class="nav">

    <li>首页</li>

    <li>我的日志</li>

    <li>我的相册</li>

    <li>我的心情</li>

    <li>个人中心</li>

</ul>

<p>这里不是导航的内容</p>

页面显示如下：

如何解决以上问题呢？唯一的办法就是清除浮动。

清除浮动的方法

1. 使用空标签清除浮动

在需要清楚浮动的层里边添加：<div style="clear:both"></div>或者<br style="clear" />

    
首页
    
我的日志
    
我的相册
    
我的心情
    
个人中心
    

2. 使用overflow属性

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可!overflow:auto; 是让高度自适应，zoom:1; 是为了兼容IE6，也可以用 height:1%; 的方式来解决，注意，zoom不符合W3C标准。overflow:hidden也可以实现。

    
首页
    
我的日志
    
我的相册
    
我的心情
    
个人中心

3. 使用after伪对象清除浮动

after 伪对象非 IE 浏览器支持，所以并不影响到 IE/WIN 浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；二、content 属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候 content 属性的值设为"."，但我发现为空亦是可以的。

ul.nav:after{display:block;clear:both;content:"";visibility:hidden;height:0;}

清除浮动后效果如下：

使用一下代码清除浮动，屡试不爽。

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
.clearfix {display:block;}