子元素浮动出父元素之外解决方法

设置了两个div,div2嵌套在div1中，是div1的子元素。div2设置了浮动，结果div2浮动到了div1外面去了。

问题描述

#div1{
border:solid 2px black;
}
#div2{
width:200px;
height:200px;
background:red;
float:left;
}

本来div1的大小应该随着div2自动变化，但是现在div2在div1的外面。

方法一

父元素设置float

代码如下

#div1{
border:solid 2px black;
float:left;
}
#div2{
width:200px;
height:200px;
background:red;
float:left;
}

效果如下

方法二

div2下增加clear:both的新div

代码如下

<div id="div1">
    <div id="div2"></div>
    <div style="clear:both;"></div>
</div>