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

起初，这个问题和float还有设置宽高之间是没有任何关联的，一开始这是一个关于height和line-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，再之后我去查了下WHATWG的标准文档，验证了这个说法，在此，谜题总算解开了！

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

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

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

---

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