[记录]-关于行内元素在浮动后可以设置宽高的思考

博客探讨了为何行内元素在设置浮动(float)后可以设置高度和宽度。这是因为浮动会使元素的行为类似于块级元素,即display属性变为inline-block,允许指定尺寸。这一现象在CSS规范中有明确解释,并且在《编写高质量代码-Web前端开发修炼之道》一书中也有所提及。

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

平时经常给<a><span>这样的行内元素设置浮动float:left or float:right,浮动了之后还可以给它们设置高度啊宽度啊。这点大家都知道,但是为什么呢?为什么行内元素在浮动之后就可以设置高宽了呢。 引用下曹刘阳写的《编写高质量代码-Web前端开发修炼之道》一书中看到的一句话:

position:absolute和float会隐式地改变display类型,不论之前什么类型的元素(display:none除外),只要设置了position:absolute 、 float中任意一个,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素。

实际上,CSS文档中也有解释:

当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。float在绝对定位和display为none时不会被应用。对应的脚本特性为styleFloat(IE)或cssFloat(非IE)。(注意这里为styleFloat或cssFloat,而不是float)。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值