解决浮动的影响

浮动会产生的影响:

高度塌陷:

如果父亲没有固定的高度,子元素会添加浮动,后面元素上去补位置,父元素会高度变低

解决方式:

  1. 给父元素一个固定的高度

缺点:父元素是固定高度时,如果元素过多,会产生溢出

  1. 清除浮动,不让补位元素进行补位

缺点:如果父元素里面只有一个子元素,没有补位元素,则需要给部位元素后面添加
一个元素,应用清除浮动,但是这个元素类型必须是块元素一般使用div

  1. 给父元素添加overflow:hidden;
    除了溢出隐藏外,还会触发BFC块级元素上下文,形成一个独立的区域,不受到外界的干扰,也不会把内部元素影响到外部,同时还能让浮动的元素参与高度的计算用于解决高度塌陷。

缺点:会隐藏溢出元素
优点:简单、代码简洁

  1. 万能清除法

父级添加after伪元素在这里插入图片描述
父级添加双伪元素
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值