清除浮动的方法

浮动会使当前元素脱离普通文档流,从而对父级元素和兄弟级元素造成影响,最终影响布局。所以,清除浮动是每个前端必须掌握的知识。下面列举几种清除浮动的方法,如下:

方法1:父级定义高度(height)

html代码:


css代码:



效果图:


原理:父级元素手动设置高度,可以解决子元素浮动后,父级元素无法自动获取高度的问题。

优点:代码少、简单、易掌握。

缺点:只适合高度已知的情况,有局限性。

建议:不建议使用。

方法2:父级元素样式中定义overflow:hidden

html代码:


css代码:


效果图:


原理:使用overflow:hidden时,父级元素不用定义高度,父级元素会自动获取浮动区域高度。

优点:代码少、简单易掌握、支持性好。

缺点:不能和position结合使用,会将超出部分隐藏。

建议:建议使用,但尽量避免和position同时使用。

方法3:父级元素后面加空的兄弟元素,并且其兄弟元素的样式设置:clear:both

html代码:


css代码:


效果图:


原理:添加一个空标签元素,通过clear:both,让父级元素自动获取浮动元素的高度。

优点:代码少、稳定、浏览器支持好、不容易出现问题。

缺点:原理不易被理解,并且如果浮动布局多,会增加很多空标签元素。

建议:不建议使用。

方法4:父级元素定义伪类:after和zoom

html代码:


css代码:


效果图:


原理:通过伪类,让父级元素自动获取浮动元素的高度。

优点:稳定,浏览器支持好。

缺点:代码稍微多点,原理不易掌握。

建议:建议使用,添加公共类,减少css代码。

方法5:父级元素添加overflow:auto

html代码:


css代码:


效果图:


原理:父级不能定义高度,使用overflow:auto,浏览器自动获取浮动区域高度。

优点:简单、代码少、支持好。

缺点:容易出现滚动条。

建议:不建议使用,容易出现滚动条。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值