clearfix

  作者:会飞的

clearfix:after伪类撑起div 在写HTML代码的时候,容器内部元素浮动之后会使容器丧失撑开的高度,导致我们需要固定容器的高度,但是有些需求是需要我们做灵活的高度的,那么我们该如何去解决这个问题,这个问题的根本原因又在于什么呢? <div styl

clearfix:after伪类撑起div


    在写HTML代码的时候,容器内部元素浮动之后会使容器丧失撑开的高度,导致我们需要固定容器的高度,但是有些需求是需要我们做灵活的高度的,那么我们该如何去解决这个问题,这个问题的根本原因又在于什么呢?


    <div style="border:2px solid red;">


<div style="float:left;width:80px;height:80px;border:1px solid blue;">aaaaaaaa</div>

<div style="float:left;width:80px;height:80px;border:1px solid blue;">bbbbbbbb</div>


    </div>

    上面的代码运行之后,可以很明显的看到红色框div没有被撑开,在编写页面遇到这种情况的时候,我们通常会在容器结尾添加clear:both;


    <div style="border:2px solid red;">


<div style="float:left;width:80px;height:80px;border:1px solid blue;">aaaaaaaa</div>

<div style="float:left;width:80px;height:80px;border:1px solid blue;">bbbbbbbb</div>

<div style="clear:both;"></div>


    </div>

    这样的话,这个div就被撑开了,我们的目的也就达到了,但是这个时候又会有新的问题产生:第一,最直观的,用于清除浮动的div占用了高度;第二用dojo做Drag & Drop的时候,由于这个div是容器div的一个字节点,如果这个节点被移动,则会造成排版上的Bug:如果要显示的蓝框的div被移到这个div之后,则因为clear:both,它会被强制换一行显示。


    ok,我们一个一个来解决吧:

    第一,div高度清零:

设置height:0; line-height:0; font-size:0;

    第二,为容器div设置如下样式:

  .clearfix:after{ content:"20"; display:block; height:0; clear:both;}

  .clearfix{+height:1%;}

  * html .clearfix{height:1%;}


    源码格式类似如下:

    <style>

    <!--

    .clearfix:after{ content:"20"; display:block; height:0; clear:both;}

    .clearfix{+height:1%;}

    * html .clearfix{height:1%;}

    -->

    </style>


    <div style="border:2px solid red;" class="clearfix">

<div style="float:left;width:80px;height:80px;border:1px solid blue;">aaaaaaaaaa</div>

<div style="float:left;width:80px;height:80px;border:1px solid blue;">bbbbbbbbbb</div>

    </div>


    原因分析:

第一:div默认有行高,IE6下默认的字体尺寸大致在 12 - 14px 之间,当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 6px; 来定义了一个 div 的高度,实际在 IE 下显示的仍然是一个 12 px 左右高度的层,因此,我们需要做的就是改写其默认值,强制将其清零。

第二:有时候我们不明白为什么用一段样式可以去修正一个bug,但是我们确实修正了,不管你是借鉴别人的方法还是查阅各种资料自己发明的方法,但是实际上我们并没有理解这一段样式的含义。那么在这个时候我们不妨逐次去掉样式中的某个或者某些属性,看看还能否达到我们想要的效果,如果不能,那不是恰好说明该属性是修正这个bug的关键元素么?

读者可以去逐次试一下,最终我们发现clear:both; display:block; 正是我们所说的关键点。到了这个时候,你也可以清楚的知道,内部元素浮动的时候使得容器div丢失了clear:both; display:block;这两个属性,导致其无法撑开,这样的话,也许你还能再找到其他的解决方案。