您的位置：首页 > 其它

子div使用float 后如何撑开父div

2016-08-05 23:49 351 查看

当div1里面嵌套一个div2时，div2设置float，那么div1是无法被撑开的，原因可以理解为他们不再同一层，div2漂浮在div1上，导致div2撑不开div1。

以上是效果图

<style type="text/css">
#lside{
width: 200px;
height: 100px;
background:red;
float: left;
}
#rside{
width: 200px;
height: 200px;
background: blue;
float: left;
}
#center{
width: 600px;
background: grey;
}
</style>

<body>
<div id="center">我在中间
<div id="lside">我是左</div>
<div id="rside">我是右</div>
</div>

</body>

这是代码，

为了解决上述问题有2中方法：

1、在浮动容器结束后加上以下代码；<div style="clear:both;"></div>；意思是清除浮动；

<body>
<div id="center">我在中间
<div id="lside">我是左</div>
<div id="rside">我是右</div>

<div style="clear:both;"></div>

</div>

</body>

效果图：

2、在外层<div id="center">的css代码加入overflow：auto；

建议大家使用第一种方法，浮动用完之后就消除浮动，因为浮动有继承特性。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航