为什么行内元素包含块级元素的效果是这样？

Question

问题

今天回顾了一下行内元素和块级元素的区别，突然发现有人说行内元素不能包含块级元素，于是我就试了一下行内元素包含块级的效果，但是产生的效果却难以解释以及难以找到解释。

效果

HTML代码如下所示

<span id="span1">
    before div
    <div style="font-size:22px">div</div>
    after div</span>
<span id="span2">new span</span>

产生的效果图如下所示：

我想知道如何去理解这样的现象呢？

疑问点

发现这个现象之后，我先查看了一下#span1的实际宽高。

然后我在console里进行查询宽高。

第一张图中的数据是实际表现出来的宽高，但却与它的选中范围不相符。但是第二张图的数据却是对应第一张图的蓝色选中范围，为什么会这样？

从#span2紧接着#span1是否可以认为在行内元素中插入块级元素并不会影响行内盒的表现？

行内元素为什么说不能包含块级元素？

Answer 1

拆分成几个问题讲吧，

1. 怎么理解这种现象？

   • 行内元素包含了块级元素，块级元素又是独占一行的，所以出现了行内元素本来一行的，结果被div这个怪胎撑开了，从此 before div和afterdiv分隔两地，一年只能见一次（扯远了，咳咳）

2. 解释#span1的宽高

   • 先看宽度，由于#span1被div这个块级元素撑开了，所以浏览器在计算盒模型你的时候，会把div的宽度包含在内，所以是浏览器的宽度。
   • 再看高度，为什么会是71这个数字呢？首先我得先po出我的实验图
     这是楼主的仿照情况，
     
     这是中间div的宽高示意图
     

     这是把beforediv单独作为span时的情况
     20.8+28.8+20.8=70.4!破案了！就是span里三块的高度相加！
     那么新问题来了，为什么中间的div明明设置font-size为22px，实际高度却是28px呢？
     这是因为没有设置line-height,line-height默认为normal，会依据默认字体来调整比例，我电脑上的默认字体是微软雅黑，所以大概的比例是1.3。

3.为什么不推荐行内元素包含块级元素
这关乎HTML的语义，而且行内元素用来表示具体内容，块级元素用来布局，还是有层级的关系在里面的，可以看一下winter的课哦！

Answer 2

我是小白，老师说过行不能包块，a不能包a p不能包p，说不能包我还真没试过，但分析产生现在这种情况的原因是：先说宽度我觉得是因为里面第一个文本行下的div使第一个文本行隐式转化为块级元素了，因为给div设置宽度并没有使span宽度变小还是浏览器宽度，高度我算了下20.8+28.8+20.8 = 70.6，也就是约等于71了，就是span1包的文本行加div的高度加文本行高度 ，然后第二个文本行和原来一样但因为前一个div独占一行所以还是行级，导致span2和它在同一行，至于为啥和选中的不符合我也没想懂。
html设置各种盒子是因为都是有用处的，行级框是为了显示内容，块级块为了布局，在块里写内容很正常 ，那内容框里套块级元素没有道理吧？要是咱们设计html css会怎么解释呢？我没想动咋解释，所以我也就没仔细想过也就记住了这个规则， 既然规定都规定不让行级套块级了第二个问题行内插块级影不影响也就没有意义了吧，你说呢？
我是小白，再转行学习中。说的都是自己的见解对不对我也不清楚哈哈哈，望共进步

Answer 3

<span id="span1">
    before div
    <div style="font-size:22px">div</div>
    after div
</span>
<span id="span2">new span</span>

你的这段 html 浏览器最终会这样解析

<span id="span1">
    before div
</span>
    <div style="font-size:22px">div</div>
<span>
    after div
</span>
<span id="span2">new span</span>

在看你的结果，是不是一样了。规矩是不允许你在行内元素内写块级元素，但是浏览器是有容错机制的。

所以按照规矩来写代码是有一样的。