DIV撑开

引用自：http://radzhang.iteye.com/blog/1678734

在CSS排版中，若是一个层中的层使用了float浮动的话，那么就有可能会出现外层没有被内层撑开的状况，如如下代码所示：

<div style="width:300px; ">
    测试
    <div style="width:100px; height:100px;  float:left; margin:10px;">
        左边
    </div>
</div>

     若是要解决这个问题，能够在外层的CSS中加上“overflow:auto”。

    在CSS中overflow属于用来讲明当内容溢出元素框时要怎么处理，从上图中能够看出，内层已经溢出了外层，因此须要使用overflow属性来指如何显示内层中。overflow属性的默认值是visible，也就是无论它是怎么溢出的，溢出的内容不裁剪，任其显示在元素框外面。

    除了visible值以后，overflow属性还有如下几个值：

• hidden：内容会被裁剪，溢出的部分看不到。
• scroll：使用滚动条来查看溢出的部分，始终显示滚动条。
• auto：若是内容须要裁剪，则等于scroll，显示滚动条；不然不显示滚动条。
• inherit：从父元素中继承overflow属性值。不过之前的IE版本都不支持该属性值，包括IE8，IE9还没试过。

    因为本例中，外层的CSS没有指定overflow属性，因此默认为visible，也就是无论它怎么个溢出法，因此，只要将外层的CSS中加上overflow:auto，如如下代码所示：

<div style="width:300px;  overflow:auto;">
    外层
    <div style="width:100px; height:100px;  float:left; margin:10px;">
        内层
    </div>
</div>

    也许有人会说，为何设置overflow:auto以后，外层就包含了内层，而不是将溢出的那部分使用滚动条显示出来呢？这是由于没有指定外层的高度，因此它就自适应了。若是指定了外层的高度，而内层的高度又大于外层的高度，那么就会显示滚动条了。如如下代码所示。

<div style="width:300px;  overflow:auto; height:80px;">
    外层
    <div style="width:100px; height:100px;  float:left; margin:10px;">
        内层
    </div>
</div>

 

 

注：div内的控件若是设置了position:absolute 那么div将不被自动撑开，必须设置为relative；若是的确须要absolute，那么只有固定设置div的高度