当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；
建议大家使用第一种方法，浮动用完之后就消除浮动，因为浮动有继承特性。
扫一扫
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
