在说明这个问题之前，我们先来回顾一个块级元素与内联：我们知道
内联元素可以嵌套内联元素，块级元素可以嵌套部分块级元素并也能嵌套内联元素，但内联元素不能嵌套块级元素。块级元素为block，内联元素为inline，拥有“inline”特性的同时又拥有“block”的特性称为replace元素。
在实际开发中，有时会犯一个小错误：
这是p元素的开始 >span元素1和span元素2
这是p元素的开始
div元素1
div元素2
这是p元素的结束
它的效果会出乎意料：
代码中，在
元素中嵌套了两个元素，它们按照浏览器的渲染正常显示。但当在元素中嵌套两个
元素时，我们会发现，
分别在一行显示，而此时"p元素的开始"与"p元素的结束"也在不同的一行显示，与我们想要的（这两段文字在一行显示）相反。它们也均在不同行显示。这是什么原因呢？
原来，在元素中是不能嵌套
元素的，
在标签还没结束时，遇到下一个块级元素就会自动结束
。即：
元素的开始
元素的开始
它的开始标签会被浏览器会解析为：
元素的开始
元素的开始
它的结束标签同样也会被解析为一个
元素。
于是前面书写的代码：
这是p元素的开始
div元素1
div元素2
这是p元素的结束
实际上被解析成了：
这是p元素的开始
div元素1
div元素2
这是p元素的结束
也就是说，一个p元素会被解析成两个p元素，两个会被解析成四个。照这样依次类推下去。
我们来看浏览器把这段代码解析成的形式：
即使我们为
添加样式，将它变成内联元素形式：
这是p元素的开始
div元素1
div元素2
这是p元素的结束
它的效果还是：
我们再用JavaScript代码来检索一个页面中的p元素：
这是p元素的开始 >span元素1和span元素2
这是p元素的开始
div元素1
div元素2
这是p元素的结束
按原来的思维来说，此时应该会返回2，表示页面中有两个p元素，
但我们会惊讶地发现，代码返回了3，也就表示浏览器解析为3个p元素。
因此得出结论：
在p元素是不能嵌套Div元素的，它会被浏览器解析为页面中p元素的两倍数量，也就是开始标签被解析为一个p元素，结束标签被解析为一个p元素。
元素的三个类别：
那哪些块元素里面不能放哪些块元素呢？我们可以先把所有的块元素再次划分成几个级别的，我们已经知道是在最外层，下一级里面只会有
、、
