html子级盒子为什么不随父级盒子变化,解决子盒子高度超出父盒子

代码:

/p>

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

高度不能自适应[请用标准浏览器查看]

class="box">我是父盒子,我的高没有设定,但是我的子盒子高过我时,在标准浏览器中我的高不能自适应。

class="box2">

这个盒子是小盒子,它没有设定高度属性,其高度是随里面的文字的加多而自动升高的,但是当它的高度超过父级盒子时,在标准浏览器中并没有把父级撑高,这种情况与上面讲的子级宽度超过父级元素是一样的,但是这种高度自适度常是我们需要的,如何做到让高度自适应呢,常见的办法是在父级内加入以下样式:清除掉与其同级小盒子的浮动。

效果:

IE:a4c26d1e5885305701be709a3d33442f.png FF:a4c26d1e5885305701be709a3d33442f.png

可见效果不一样!!

现在去掉注释:

style="clear:both">

即加一个空的div,然后clear:both!

效果如下:IE、FF里的效果都为:a4c26d1e5885305701be709a3d33442f.png

完全一样!!!

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值