/ 前端基础

关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考

起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于heightline-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现有一个内联元素<span>竟然可以设置宽高,即使在我特地加上display: inline;的情况下依然可以设置宽高。(写这篇文章的时候已经忘记了具体场景了,只是把原因记录了下来)。对这个反常的现象,我很好奇,所以开始了“探索与发现”之旅。

首先我想搜的是,内联元素为什么可以设置宽高,于是找到了这篇文章:jlds123 - 《为何img、input等内联元素可以设置宽、高》。在这个文章里提出了一个我之前没有了解到的概念:替换元素和非替换元素,于是我开始搜索替换元素和非替换元素的概念。

替换元素:在"CSSWG"的标准文档中,里面说到替换元素就是“元素的内容在CSS格式化模型的范围之外的”,比如<img>元素的内容,它的内容会被src所指定的图片替换,并且内容本身有自己的宽度、高度、方向这些自身特性,不需要由CSS的特性去支撑就有了,而非替换元素是需要指定CSS才能有这些特性的,即使没有明确指定,也有其默认的CSS特性。替换元素的概念清晰了,那么非替换元素的概念也就清晰了。

非替换内联元素:*"唯一不可以设定宽高"*的就是非替换内联元素,非替换内联元素首先是内联元素,其次是非替换的,即它的内容首先已经写在HTML中了,而且它也依赖CSS来为它设定特性,比如常见的<span>元素就是非替换内联元素。

知道了上面这些概念以后,就可以回过头来看最初的那个问题了--为什么一个<span>可以设置宽高,然而发现问题还是没有解决,<span>是非替换内联元素,在上面的理论基础上,还是不应该能设置宽高的。标准文档是应该不会出问题的,所以我想,这里面的问题也许是这个<span>已经不是非替换内联元素了,会不会是一个块级元素了呢?结果就像刚才说的,即使我使用display: inline;的方法,这个<span>依然可以设置宽高,事情变得更加扑朔迷离了啊……

接下来我仔细看了一下这个<span>元素的每一个样式,有一个地方引起了我的注意,这个<span>元素是进行了float操作的,会不会是这个引起的呢?我尝试性地在百度搜了一下,一搜还真的搜到了结果!在这个问答里,明确地说float之后,<span>会变成块级元素block(现在自己觉得应该是inline-block),再之后我去查了下WHATWG的标准文档,验证了这个说法,在此,谜题总算解开了!

顺带着,我还了解了一些关于float的其它特性,值得注意的有这些:

  1. float之后的元素虽然变成了块级元素,但不同于一般的块级元素,它的宽度并不占满所在行的整行,而是由内容的宽度决定的,如果内容不占满整行,那float后的元素也不会占满整行。(现在自己觉得就是inline-block)
  2. 一个元素float之后,是浮动到父元素左上角或者右上角的,在float之后,这个元素就不会再起到撑开父元素的作用了。一个直观的例子就是,如果一个父元素中所有的子元素都float了,那这个父元素的高度就会变成0(如果高度没有指定,是由内容高度决定的话)。

结语:这个<span>元素帮我这个初学者理清了一些以前没听过或者模糊的概念,比如替换元素和非替换元素,只有非替换内联元素不能设置宽高,还有float之后会发生什么:1.变成块级元素;2.不一般的块级元素;3.不再起到撑开父元素的作用。


资料文章都已在文中文字上给出超链接。