外层div高度不随内层div高度改变的解决办法 - 逍遥云天

外层div高度不随内层div高度改变的解决办法

当b1和b2都是float=left时候，a1层的高度不会被b1和b2的高度撑开。

<div id=“div1″>
    <div id=”div2″ style="float:left;height:200px;"></div>
    <div id=”div3″style="float:left;height:200px;"></div>
</div>

解决方法一：设置div1的display属性为table即可；
解决方法二：插入一个额外的标签
　　这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签，是W3C推荐的方法:
<div style="clear:both;"></div>
解决方法三：使用after伪类
　　这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。
　　这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。
复制代码代码如下:

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