Overflow:hidden的bug是什么?

提醒:本文发布于 2881 天前,文章内容可能 因技术时效性过期 或 被重新修改,请谨慎参考。

TOC
  1. 1. 清除浮动的方式
    1. 1.1. 空元素撑开父层
    2. 1.2. 利用br的clear属性
    3. 1.3. 父级overflow:auto
    4. 1.4. 父级display:table
    5. 1.5. 利用伪元素
      1. 1.5.1. 版本1:
      2. 1.5.2. 版本2:
    6. 1.6. overflow:hidden

清除浮动的方式

空元素撑开父层

<div class="wrap">
<div class="div1"></div>
<div class="div2"></div>
<div style="clear:both"></div>
<div>

缺点:增加无意义的标签,对以后维护不利

利用br的clear属性

<div class="wrap">
<div class="div1"></div>
<div class="div2"></div>
<br clear="both">
<div>

缺点:结构和表现混合,和方法一类似

父级overflow:auto

<div class="wrap">
<div class="div1"></div>
<div class="div2"></div>
<div>

缺点:低版本IE会出现滚动条

父级display:table

缺点:盒模型属性已经改变,会在低版本IE中造成一系列问题

利用伪元素

版本1:

先定义两个class:

.clearfix:after {content:"\20"; display:block; height:0; clear: both;visibility: hidden; }
.clearfix { *zoom:1; }

这是目前最常见的清浮方式,IE6、7通过zoom:1触发hasLayout特性

缺点:貌似又多了点代码,当然可以忽略不计

版本2:

.floatfix:after{content: "";display: table;clear:both;}

overflow:hidden

在厂里面常常有人用clearfix来清浮,但是我通常用的是OH来清浮,老大说这样又问题,困惑至今。
网上搜到一篇overflow:hidden相关的说明文档,但是年代久远,其中的bug本人亲测没能还原出来,希望得到解答。

访客评论