在 HTML 中 清除浮动四种的方法

本文探讨了在HTML中清除浮动的重要性,旨在解决高度塌陷问题。文章详细解释了浮动元素如何影响父级盒子,以及四种清除浮动的方法:额外标签法、设置父级overflow属性、使用父级:after伪元素和使用双伪元素法。这些方法有助于恢复布局正常,防止内容因浮动元素而错位。
摘要由CSDN通过智能技术生成



为什么要清除浮动

    由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子(由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响)。


清除浮动本质

  • 清除浮动的本质是清除浮动元素脱离标准流造成的影响
  • 如果父盒子本身有高度,则不需要清除浮动
  • 清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了

清除浮动的策略:闭合浮动(只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子)



什么是高度塌陷?

    父元素高度自适应,子元素添加浮动后,造成父元素高度为0,称为高度塌陷问题。

为什么会脱标?

    因为所有元素本都是在标准流里布局,即块元素独占一行、行内元素从左到右排列;被添加浮动效果后,不再属于标准流且会脱离标准流(脱标),此元素的位置将不再保留。此时,本被布局在下面的块元素会往上移动,排在右边的行内元素会向左边移动,导致整个布局发生改变。


一、清除浮动的语法<

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值