/* 336x280*/
CSS 使用浮动会造成布局的混乱，通常清除浮动的方法是，利用一个如下样式的空 Div：
<div class="clear"></div>
.clear{clear:both;}
更为优良的 CSS 代码是：
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{zoom:1;}
这个方法目前已经广泛使用，淘宝、口碑，都是这种用法。通过 after 伪类 :after 和 针对 IE6 的独立 CSS Hack 来实现，完全兼容主流浏览器。
当然，这在通过 CSS 在元素之后追加 “.” 并不必要，因为还需要 visibility 来隐藏掉它。通过优化，代码如下：
.clear:after{content:"\20";display:block;height:0;clear:both;}
.clear{zoom:1;}
其中，\20 指在容器后添加空格，这样就避免使用 visibility 隐藏可视性了。
/* 336x280*/
版权所有，转载请注明出处。
转载自 <a href="http://www.mangguo.org/mangguo-teach-you-clear-float/" title="芒果教你清除浮动" rel="bookmark">芒果教你清除浮动 | 芒果小站</a>
已经有 12 条群众意见
- 易搜购
#1/2010-03-06 22:13clear:both; 这个经常用，还没有碰到过特殊的问题。 回应
- zhouqi
#2/2010-03-28 22:25020 算是什么编码？ 回应
- zhouqi
#3/2010-03-28 22:32我试了下～content:”"也行～ 回应
- 芒果 对 说
#4/2010-03-29 17:18写错了，应该是 content:”\20″ 回应
- lily
#5/2010-04-22 14:49写的很好，不知道其它人是怎么写的，我经常使用 .clear{ overflow:hidden; zoom:1;} 来清除浮动，代码简洁，而且兼容各个浏览器，虽然说，因为 overflow:hidden 有一些局限性，而且不能通过 W3C 验证，但我觉得利大于弊，可取。向博主学习了！！！！ 回应
- luochong
#6/2010-07-28 12:30after 伪类 ie6、7 支持吗？ 如果不支持针对 ie 怎么写？ 回应
- 芒果 对 说
#7/2010-07-28 18:35IE6 和 IE7 都不支持 :after 这个伪类。 回应
- 边框重叠悬停效果 - 数据力量
#8/2010-09-04 04:19[...] 最终效果如下。因为子节点浮动，外层最好能清除浮动，清浮动的方法请猛击此处查看。 [...] 回应
- 袜子的眼睛
#9/2011-01-15 10:28应该写一个对应的 Html 出来，那样就最好了！！ 回应
- doom 对 说
#10/2011-03-05 23:17哥们你也太新了把。。 回应
- 芒果教你清除浮动 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广
#11/2011-05-03 23:05[...] 转载至：芒果教你清除浮动 | 芒果小站 分类: css, 其它 标签: 临时 5 个简单实用的 CSS 属性纯 CSS 实现文本渐变效果CSS 的外联，内联和嵌入CSS 有序列表 ol 和无序列表 ul用 JavaScript 实现 HTML 代码运行框你真的认识 window.location 吗？使用 <hr> 标签创建水平分隔线用 CSS 实现段落首行缩进YUI 2: Event Utility多层元素嵌套的圆角按钮 评论 (0) Trackbacks (0) 发表评论 Trackback [...] 回应
- 邵希杰
#12/2011-08-08 16:15很久没来过了，主题一如既往地漂亮。激动了！ 回应
我简单说几句