浮动清理方法.pdf

← 感谢苹果，新主题进度归零 免费 WordPress 主题—— 《Field》 → 清理浮动的那些事儿（1）——6 种清 理浮动的方法 发表于 2011 年 02 月 01 日 由 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;}属性即可清理浮动。亦可使用 lt;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，使用方便但是会对下面的文档造成影响。 建议在容器原本就浮动或者容器使用了绝对定位时使用该方法。不要在主要布 局中使用。 使用邻接元素清理