p 标签里面不能嵌套 div 标签

p 标签里面不能嵌套 div 标签

开头先放大加粗的展示这句话

作为一名半专业的切图仔，怎么能够犯如此低级的错误？？

某日…

正常搬砖中，突遇一奇葩问题，尝试各种方案均试无法解决

大致情况如下(JSX)：

...
<p className={styles.item1}>
<span>Item1</span>
<Component1 />
</p>
<p className={styles.item2}>
<span>Item2</span>
<Component2 />
</p>
<p className={styles.item3}>
<span>Item3</span>
<Component3 />
</p>
...

基本结构就是这样，按理说没啥问题，但是实际浏览器渲染之后，styles.item2 渲染到了 item3 上，造成 Item2 样式无法正常渲染。我的第一反应是 less 编译异常，遂重启 node 服务，结果问题依然重现。人生太难，又想，可能应为是组件内部的样式和外部的冲突了？

组件 Component2 内部结构大致如下：

<div className={styles.content}>do something...</div>

我先尝试将 styles.item2 下的 Component2 组件删掉，然后自己随便添加节点，结果问题消失。我感觉我好像接近真相了。。接着我又尝试直接删掉 Component2，然后直接把 Component2 组件中的内容移到 Item2 下，结构变成如下：

...
<p className={styles.item1}>
<span>Item1</span>
<Component1 />
</p>
<p className={styles.item2}>
<span>Item2</span>
<div className={styles.content}>do something...</div>
</p>
<p className={styles.item3}>
<span>Item3</span>
<Component3 />
</p>
...

结果…问题仍然存在，但当这两组节点放在一起时，我突然发现，div 是直接作为 p 的子元素的，我模糊的记得 long long ago 之前，学习 html 基础的时候，有个经典案例就是 p 标签下面不能直接嵌套 div 标签！！

案例：


原来是由于p标签下面嵌套了div标签导致的样式异常啊！找到问题，将 Component2 组件内部的 div 改成其他标签，果然问题解决。

到这儿，这个阻塞我近 1 个小时的问题终于解决，虽然这次是接收已离职同事的代码时遇到问题，但我并不敢保证，我自己在开发过程中就一定不会遇到这个问题，愈发觉得越想走的远，就越要夯实基础。

至于为什么 p 标签下面不能嵌套 div 标签，这个问题，网上有同学把这个案例称为 HTML 的一个 bug，但我认为，这并非问题。而正是 HTML 的规范及其特性的体现。

回顾一下这些基础定义：

HTML 标签（元素）分为：

• block 块级元素：宽度默认一样，高度由内容撑开。例如 div 元素

• inline 行内元素：默认无宽高，有内容撑开，无法直接用 css 设置宽高，无法设置处置方向上的 margin 值。例如 span 元素

• inline-block 行内块级元素：可直接设置宽高，默认无宽高，只由 css 直接设置宽高，如 img 元素

嵌套规则：

• 行内元素不能嵌套块级元素

• 块级元素可以包含行内元素或某些块元素，但是行内元素不能包含块元素，它只能包含其他的行内元素。

• 有几个特殊的块级元素只能包含行内元素，不能再包含块级元素：h1~h6、p、dt

• 块级元素不能放在标签 p 里面

• li 标签可以包含标签，因为 li 和 div 标签都是装载内容的容器

W3C 把 P 元素归到 TEXT 分类中，是认为 P 元素一般是作为文本容器的。所以如果把 P 元素作为块级容器似乎没什么用，毕竟已经有
div 了。

div 主要用来搭建页面骨架，从语义化来讲 p 标签指代 Paragraphs，指文本段落的意思。