容器内元素float时，容器自动高度的解决方案

先看HTML代码如下：

<div id="wrap">
    <div id="header">
        <h1>three colums layout.</h1>
    </div>
    
    <div id="content">
        <div id="main">
            <p>Hello,CSS & HTML.</p>
            <p>I love this game.</p>
        </div>
        <div id="left">
            <p>I'm the sub colum.</p>
        </div>
        <div id="right">
            <p>I'm the extra colum.</p>
        </div>
    </div>
    
    <div id="footer">
        <p>Copyright&copy; by zhounuhong.</p>
    </div>
</div>

其中，content包含了3个浮动的层。它们对应的CSS如下：

body { font-size:12px; font-family:Verdana, Geneva, sans-serif; }

#wrap { margin:10px auto; width:950px; }

#header { background:#000; color:#fff; padding:10px; margin-bottom:10px; }

#content { width:100%; margin-bottom:10px; }
#main { float:left; width:550px; background:#dedede; margin-left:200px; _display:inline; }
#left { float:left; width:190px; background:#F90; margin-left:-750px; }
#right { float:right; width:190px; background:#3CC; }

#footer { background:#666; color:#000; text-align:center; padding:5px 10px; }

以上CSS只能在ie6下正常（我测试了chrome  firefox  ie8   ie6），而其它浏览器下，footer与content重叠了，且保持了float的关系。

尝试解决方法一：结果失败。

为footer添加clear:both属性，解决了重叠的问题，但是content下的margin-bottom:10px也没有了。

再次修改content的margin-bottom:10px为padding-bottom:10px，问题还是没有得到解决。

看来，从margin或padding下手个人暂时没有办法解决了。只好另外找其它的方法。

 

尝试解决方法二：成功。

为content添加overflow:hidden，问题得到解决。

 

尝试解决方法三：成功。

在HTML中，<div id="right">...</div>之后添加一个<div class="clearfix"></div>，其样式如下：

.clearfix { clear:both; display:block; height:0px; overflow:hidden; }

 

尝试解决方法四：成功。

为content添加属性 display:inline-block，问题得到解决。

 

尝试解决方法五：成功。

为content添加一个伪属性集，如下：

#content:after {
    content:'.';
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

 

尝试解决方法六：成功。

为content添加一个属性float:left，但是前提条件是float:left不影响content的位置的情况下，并且content的后面一个元素应该添除掉这个float。

 

问题的根本所在：因为浮动的元素不占空间，所以容器元素不包围它们。

 

本文到此结束，欢迎大虾们指点更多方法。