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

浮动元素与display属性的隐式转换

最新推荐文章于 2024-07-12 09:03:04 发布

原创最新推荐文章于 2024-07-12 09:03:04 发布 · 966 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端

前端开发学习专栏收录该内容

9 篇文章

订阅专栏

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

平时经常给<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)。