CSS清理浮动

转贴自：http://lightcss.com/all-about-clear-float/

 

清理浮动的那些事儿（1）——6种清理浮动的方法

发表于 2011年2月1日 由 Sivan

文章目录[ - ]

1. 前言
2. 清理浮动的方法
   1. 使用带有clear属性的空元素
   2. 使用CSS的:after伪元素
   3. 使用CSS的overflow属性进行怪异处理
   4. 给浮动元素的容器添加浮动
   5. 使用邻接元素清理
   6. 其他方法
3. 我的解决方案
   1. 综合运用方案
   2. 一劳永逸方案
4. 小结

前言

(update 2011.02.01)配合图片重写了一下本文。
近期有一项目涉及修改别人所写的主题，在清理浮动的环节上无比痛苦。在此整理一下关于清理浮动的方法和我的看法，希望能提供一些参考作用。

浮动（Float）最初的定义我想只是为了实现图文环绕效果，而如今通常在多栏布局时使用，是CSS里最最常用的一种布局手段。比起圣杯布局等，它更加容易上手并容易处理布局问题。由于浮动的特性，在布局中使用就产生了两个问题——会对后面的元素造成影响而且造成浮动元素的容器高度失效。因此我们需要随时清理浮动，方法有很多但各有弊端。选择合理的清理方式除了让代码看起来更优雅，还会对日后维护提供很大的方便。

清理浮动的方法

使用带有clear属性的空元素

在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

我想说这并不是一个好方法，尽管它兼容所有浏览器并且随用随清。这个方法需要添加大量无语义的html元素，你能想象一个并不算复杂的footer里就使用4次div.clear吗？天哪！

使用CSS的:after伪元素

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。这是我认为目前比较完美的解决方式。

如图所见，通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格“/20”或点“.” （后者可理解为一些国外书籍过时的介绍:0）并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout（你可以把它写到IE6、7的CSS hacker文件里，这样不会影响W3C标准验证）。

该方法需要给每组浮动元素都添加一个容器，推荐在页面布局时使用。大量使用依旧会对代码量造成一些影响。

另外我想说的一点：我倾向于《无懈可击的Web设计II》一书中提到的把.clearfix改为.group，让代码的可读性更好。group说明内部元素为一组，使用clearfix客户会误认为“你写了些神马？竟然用了这么多‘修正’！”。

使用CSS的overflow属性进行怪异处理

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以怪异清理浮动。

在清理浮动前（如箭头上图），浮动的元素跳离了container层，自己跑到上层去了（用阴影表示）。在添加overflow属性后（如箭头下图），浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

虽然很多地方以“将来浏览器可能不兼容”为由，不建议使用此方法。我倒是觉得目前使用此法的国内外网站众多，浏览器短时间内并不会在此问题上后退处理。此外这个方法无需添加额外的class，在做主题时比较实用。我建议在局部和无法添加class的地方使用该方法清理浮动，但是不要作为主要清理浮动方式。overflow:auto;还是不要用了。

给浮动元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清理内部浮动。同overflow法一样无须添加额外的class，使用方便但是会对下面的文档造成影响。

建议在容器原本就浮动或者容器使用了绝对定位时使用该方法。不要在主要布局中使用。

使用邻接元素清理

什么都不做，给浮动元素后面的元素添加clear属性。

要确保的是content元素跟两个浮动元素都在同一层container容器内，如果content在container元素后面，建议使用:after伪元素清理。

其他方法

使用display:table模拟表格布局也可以解决浮动的问题，并可自动对齐高度。但是由于table的一系列问题，还是不要使用了。

我的解决方案

综合运用方案

在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul或textwidget里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。

优点：可以有效降低代码量，使用得当可以完善解决浮动清理问题。
缺点：需要熟悉各种清理方式的原理和利弊，需做好注释，否则对日后维护造成不必要的麻烦。

一劳永逸方案

整站使用相对完美的:after伪元素法清理浮动。本方案适合文档结构清晰、模块化的页面。

优点：使用方便，维护方便，很少出现错误。
缺点：需要清晰的文档结构，否则会造成代码量剧。

小结

通过对各种方法的分析，体现出网页重构时除了要对css应用得当并考虑良好的兼容性，还要培养写良好html文档结构的能力。只有html的结构整洁，模块清晰，才能更好的使用css处理布局中遇到的各种问题。

下一篇中我打算结合简单的案例综合运用各方法解决清理浮动的各种问题。