浮动,脱离标准流

本文详细对比了使用float和position:absolute使元素脱离文档流的效果。前者仅使其他盒子忽略该元素,而盒内文本仍环绕其周围;后者则使盒子及盒内文本完全忽略该元素的存在。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

所谓脱离文档流,即将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当没看到它,两者位置重叠都是可以的。这里,通过讲解浮动脱离文档流(float)和绝对定位脱离文档流(position:absolute)的区别,让大家对这一概念有更深的认识。

一、浮动脱离文档流

使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。 

二、绝对定位脱离文档流

将float: left;改为position:absolute

设置了绝对定位后,不仅是旁边的其他盒子无视蓝色div的存在,连盒子里的文本也无视了蓝色div的存在,顶着左上边框定位!

三、总结

使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。 
而对于使用absolute :position脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值