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:;
 }

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