css float引发的塌陷问题及解决方案

如果父元素高度自适应，而且子元素有设置float left/right, 那么此时父元素的高度不会随子元素而变，如果父元素不包含任何的可见背景，这个问题会很难被注意到，但是这是一个很重要的问题。

　　

html代码：

<div id="container" class="">
    <div class="left"></div>
</div>

css代码：

#container{
    width: 1000px;
    margin: 0 auto;
    height: auto;
    background: #ccc;
}
#container .left{
    width: 200px;
    background: blue;
    height: 200px;
    float: left;
}

浏览器表现：虽然设置了父元素container的background，但是很明显container的高度为0

为了防止怪异的布局和跨浏览器的问题，塌陷问题几乎总是被要处理的。如果你很明确的知道接下来的元素会是什么，可以使用 clear:both; 来清除浮动。这个方法很不错，它不需要 hack，不添加额外的元素也使得它有良好的语义性。此外看一下其他三种常用的解决方案，

方案一： 父元素设置overflow

css:

#container{
    width: 1000px;
    margin: 0 auto;
    height: auto;
    background: #ccc;
}

如果父元素的这个属性设置为 auto 或者 hidden，父元素就会扩展以包含浮动,但是overflow 属性不是为了清除浮动而定义的，要小心容易覆盖掉内容或者触发不必要的滚动条。

方案二： 内容最后加空div方法

有时候会用其他元素，但是div是比较常用的，因为div本身不会没有浏览器默认样式，没有特殊功能，而且不容易被自己写的css样式化。

html代码：

<div id="container" class="">
    <div class="left"></div>
    <div class="clearboth"></div>
</div>

css：

#container .clearboth{
    clear: both;
}

方案三：伪选择符(:after) 推荐

给父元素添加clearfix样式

html代码：

<div id="container" class="clearfix">
    <div class="left"></div>
</div>

css

.clearfix:after{
    content: "ddd";
    visibility: hidden;
    clear: both;
    display: block;
    height: 0;
}

 

以上三种方案均可解决float产生的塌陷问题，如下：