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

设置了两个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;
}

效果如下

父级float

方法二

div2下增加clear:both的新div

代码如下

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

作者  :  sailor

仅仅看明白了还不够,能把别人给讲明白了才算及格。



最新文章