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

问题描述

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

效果如下

父级float

方法二

div2下增加clear:both的新div

代码如下

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