深入了解float之“不完全脱离文档流”

本文详细探讨了CSS中的float特性,包括文字环绕、包裹性、块状格式化上下文、破坏性及没有margin合并。此外,还讨论了float如何实现流体布局,与position:absolute的差异,以及在两列布局中的使用。最后,比较了float与display:inline-block在横向排列和导航设计中的应用场景。

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

本文目录:

float的特性

浮动机制

float实现流体布局

floatabsolute的区别

floatinline-block

清除浮动的方法及优缺点


1. float的特性

一个元素设置了float属性,会表现出如下特性:

  • 包裹性
  • 破坏文档流
  • 块状格式化上下文
  • 没有margin合并
文字环绕(设计初衷)

float最早的设计目的是用于图片,使文字能够环绕在图片周围,像下面这样:
在这里插入图片描述
在这里插入图片描述
文字环绕效果是很明显的,这里要注意一个地方:浮动的块虽然脱离了正常的文档流,但是还会占有正常文档流的文本空间,可以看到上面第二种图,p的区域其实是顶到了img的底下的,因为floatimg脱离文档流,但是p上的文字却没有顶过去,也就是说p上的一部分文字空间仍然被img占据着,所以从这里也可以看出float的脱离文档流不是完全脱离。

包裹性

包裹性包含了包裹和自适应两个特性。

所谓的包裹性是指,使用float的元素会自动加上一个块级框,也就是可以像块级元素那样设置宽高,例子如下:
如果子元素宽度足够小,则浮动元素的宽度就是该子元素的宽度,如下所示:
在这里插入图片描述

.float {
    float: left;
}
<p class="float">
    <span>这是浮动元素的子元素&
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值