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

当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;

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值