解决办法:(指明该元素周围不可出现浮动元素)
1、在最外围的div设置能够放下两个div的高度(这个不说了)
2、一般我们采用的是clear:both的做法,但是这里我们会多加上div的标签,代码变多了。
3、对父级的div使用overflow:hidden
<pre>
<div class="div1">
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4"></div>
</div>
</pre>
style样式:
<code>
.div1{
border: 1px solid red;
clear: both;
}
.div2{
width: 100px;
height: 30px;
border: 1px solid blue;
float: left;
}
.div3{
width: 100px;
height: 30px;
border: 1px solid blue;
float: left;
}
.div4{
clear: both;
}
</code>
实现的效果是:
image.png下面的是直接在div1使用了overflow:hidden 后的效果图:
image.png和上面达到了一样的效果。
网友评论