子元素float后撑起父元素的方法

1.给父元素也添加float

让父元素与子元素一起脱离文档流浮动起来可以让子元素在父元素内,这样父元素就能自适应子元素的高度,但是会影响父元素之后的元素排列,甚至影响布局。

2.给父元素一个固定高度

此方法适用于子元素高度已知并且固定的情况。

3.新建一个空的div

为这个div设置clear:both。

4.给父元素添加 overflow:hidden;

overflow:hidden表示隐藏溢出,当内容超过其父元素时,可以使用该属性和值将溢出的部分裁剪掉,使页面更加美观。当子元素浮动时,父元素会增加高度去包裹住子元素,这个高度是跟随子元素自适应的高度。

5.::after 伪类;

overflow:hidden表示隐藏溢出,当内容超过其父元素时,可以使用该属性和值将溢出的部分裁剪掉,使页面更加美观。当子元素浮动时,父元素会增加高度去包裹住子元素,这个高度是跟随子元素自适应的高度。
<div class="div">
    <div class="son">子元素</div>
</div>
.div {
    width:400px;
    background:#F00;
}
.son {
    float:left;
}
.son::after {
    content:"";
    clear:both;/*清除浮动*/
    display:block;/*确保该元素是一个块级元素*/
}
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值