【CSS经典问题】子元素浮动之后如何撑开父元素

按照CSS规范,浮动元素(float)后会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列,所以不会撑开父元素的高度。但是很多时候我们需要页面根据内容自动调整高度的。如何解决这个问题呢?有6个方法:

(1)在浮动子元素后面添加

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

(2)父元素CSS添加

z-index:1; overflow:hidden;

(3)绝对定位/静止定位(absolute/fixed)。

(4)父元素也跟着浮动。

(5)父元素设定高度。

这个是掩耳盗铃的方法,实质上并没有解决问题,但效果看起来是一样的,如果父元素高度固定,可以用这个方法。

(6)父元素CSS添加:

overflow:auto;_height:1%;

 这个是我认为是最佳方案。

转载于:https://www.cnblogs.com/linyewei/p/4017996.html

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值