P不能做div的父元素？

P和div同为块元素，为什么P不能做div的父元素？

在这里插入图片描述

执行结果：

在这里插入图片描述

可以在控制台看到这样一段信息：

在这里插入图片描述

div像一条分割线一样，把无辜的 P标签 一分为二

是什么原因导致的呢？ W3C这样说：“ 如果你这样做，将会严重违反P的语义 ” 解决方法暂时没有 于是我找到了块级元素和内联元素的嵌套规则，如下：

最基本：内联不能嵌套块级，块级可以嵌套内联元素

< div>< h1>< /h1>< p>< /p>< /div> 正确（块级并列） < a href=“#”>< span>< /span>< /a> 正确（内联嵌套内联） < span>< div>< /div>< /span> 错误（内联嵌套块级）

有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素

这几个特殊的标签是：h1、h2、h3、h4、h5、h6、p、dt。所以说p里面不能嵌套div，就是我犯的错误。

< p>< ol>< li>< /li>< /ol>< /p> —— 错 < p>< div>< /div>< /p> —— 错

特殊的< li>里面可以嵌套div（< li>可以但< p>不行）

块级元素与块级元素并列、内联元素与内联元素并列

< div>< h2>< /h2>< p>< /p>< /div>　　正确 < div>< a href=“#”>< /a>< span>< /span>< /div>　　正确 < div>< h2>< /h2>< span>< /span>< /div>　　错误（块级和内联并列了，正确的写法如下）

<div>
	<h2></h2>
	<div>
		<span></span>
	</div>
</div>

以上是它的嵌套规则，但违反了不一定报错，比如我经常用 a 标签去嵌套 div，就没有什么问题。