持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
我们先上代码：
<p> 呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵 <div> 嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿 </div> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 </p>
让我们看看浏览器的解析结果：
没错，出问题了，那么问题是有了，但这是为什么呢？
这时朋友跟我说：p 是行内元素，div 是块级元素，块级元素是不能放在行内元素里面的。
我：呃呃呃，就你这水平居然知道块级元素是不能放在行内元素里面的？那 p 明显是块级元素你咋不知道？
这里我们再补充一下块级元素和行内元素的区别：
块级元素： 不管内容多少，块元素都会在浏览器中独占一行。可设置宽高，如果不设置宽高那么它的宽度是100%（占满父级元素一整行）
行内元素**或称为内联元素**：内容决定所占空间的多少，内容多少就占多少空间。不能设置宽高（默认宽高是0）。margin 垂直方向无效（margin-top,margin-bottom）,如果设置垂直方向用line-height属性。
仔细看看浏览器解析后的结果：
<p>
呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
</p>
<div>
嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿
</div>
“哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈”
<p></p>
我们发现浏览器是这么处理的：
在 p 遇见 div 还没有结束时自动给我们补上了
而后面遇见
而前面没有时自己给我们加上了一个
其实仔细想想，它这么做确实没啥不对的，因为 html 标签的作用就是：专门给文本添加特殊的语义。那么我们的 p 标签的语义是啥？当然就是表明这是一个段落了，你往里塞一个会独占一行的 div 合适吗？显然是不合适的，那你 div 就把段落给切开来了，那么浏览器这么做也就没什么不对了，它不就是把你的段落给切开来了吗，哈哈。
所以我们要记住，p 里面不能放块级元素，像 div 或 p 这种东西可千万不要往 p 里面塞啊。
