芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
14

芒果教你清除浮动

作者 芒果/分类 代码/发布于 2010-03-06 21:19

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 隐藏可视性了。

另外,芒果不推荐使用空 div 的方法。单单为了清除浮动而在结构良好的 HTML 中插入没有语义的容器,未免有些突兀。

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/mangguo-teach-you-clear-float/" title="芒果教你清除浮动" rel="bookmark">芒果教你清除浮动 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 14 条群众意见

  1. 易搜购 /2010-03-06 22:13

    clear:both; 这个经常用,还没有碰到过特殊的问题。 回应

    #1
  2. zhouqi /2010-03-28 22:25

    020 算是什么编码? 回应

    #2
  3. zhouqi /2010-03-28 22:32

    我试了下~content:””也行~ 回应

    #3
  4. 芒果zhouqi/2010-03-29 17:18

    写错了,应该是 content:”\20″ 回应

    #4
  5. lily /2010-04-22 14:49

    写的很好,不知道其它人是怎么写的,我经常使用 .clear{ overflow:hidden; zoom:1;} 来清除浮动,代码简洁,而且兼容各个浏览器,虽然说,因为 overflow:hidden 有一些局限性,而且不能通过 W3C 验证,但我觉得利大于弊,可取。向博主学习了!!!! 回应

    #5
  6. luochong /2010-07-28 12:30

    after 伪类 ie6、7 支持吗? 如果不支持针对 ie 怎么写? 回应

    #6
  7. 芒果luochong/2010-07-28 18:35

    IE6 和 IE7 都不支持 :after 这个伪类。 回应

    #7
  8. ?
    边框重叠悬停效果 - 数据力量 /2010-09-04 04:19

    […]   最终效果如下。因为子节点浮动,外层最好能清除浮动,清浮动的方法请猛击此处查看。 […] 回应

    #8
  9. 袜子的眼睛 /2011-01-15 10:28

    应该写一个对应的 Html 出来,那样就最好了!! 回应

    #9
  10. doom袜子的眼睛/2011-03-05 23:17

    哥们你也太新了把。。 回应

    #10
  11. ?
    芒果教你清除浮动 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广 /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 […] 回应

    #11
  12. 邵希杰 /2011-08-08 16:15

    很久没来过了,主题一如既往地漂亮。激动了! 回应

    #12
  13. 老饕 /2012-04-13 15:36

    支付宝那个alice项目不错,省很多心啊~ 回应

    #13
  14. ?
    firefox 3.5+ clearfix bug | 吃货的美好时代!搜集美食、旅游、娱乐、时尚与吃货们分享 /2012-08-16 17:15

    […] 早前提到的清除浮动的经典方案:http://mangguo.org/mangguo-teach-you-clear-float/ 有纰漏,如果使用以下代码: […] 回应

    #14

下面我简单说几句