clearfix

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;这两个属性，导致其无法撑开，这样的话，也许你还能再找到其他的解决方案。

猜你喜欢