在說明這個問題之前，我們先來回顧一個塊級元素與內聯：我們知道
內聯元素可以嵌套內聯元素，塊級元素可以嵌套部分塊級元素並也能嵌套內聯元素，但內聯元素不能嵌套塊級元素。塊級元素爲block，內聯元素爲inline，擁有“inline”特性的同時又擁有“block”的特性稱爲replace元素。
在實際開發中，有時會犯一個小錯誤：
<p>這是p元素的開始 >span元素1</span>和<span>span元素2</span></p>
<p>這是p元素的開始
<div>div元素1</div>
<div>div元素2</div>
這是p元素的結束
</p>
它的效果會出乎意料：
代碼中，在<p>元素中嵌套了兩個<span>元素，它們按照瀏覽器的渲染正常顯示。但當在<p>元素中嵌套兩個 <div>元素時，我們會發現，<div>分別在一行顯示，而此時"p元素的開始"與"p元素的結束"也在不同的一行顯示，與我們想要的（這兩段文字在一行顯示）相反。它們也均在不同行顯示。這是什麼原因呢？
原來，在<p>元素中是不能嵌套<div>元素的，在<p>標籤還沒結束時，遇到下一個塊級元素就會自動結束。即：
<p>元素的開始
<p>元素的開始它的開始標籤會被瀏覽器會解析爲：
<p>元素的開始</p>
<p>元素的開始</p>它的結束標籤同樣也會被解析爲一個<p>元素。
於是前面書寫的代碼：
<p>這是p元素的開始
<div>div元素1</div>
<div>div元素2</div>
這是p元素的結束
</p>
實際上被解析成了：
<p>這是p元素的開始 </p>
<div>div元素1</div>
<div>div元素2</div>
<p>這是p元素的結束</p>
也就是說，一個p元素會被解析成兩個p元素，兩個會被解析成四個。照這樣依次類推下去。
我們來看瀏覽器把這段代碼解析成的形式：
即使我們爲<div>添加樣式，將它變成內聯元素形式：
<p>這是p元素的開始 </p>
<div style="display: inline">div元素1</div>
<div style="display: inline">div元素2</div>
這是p元素的結束
</p>
它的效果還是：
我們再用JavaScript代碼來檢索一個頁面中的p元素：
<body>
<p>這是p元素的開始 >span元素1</span>和<span>span元素2</span></p>
<p>這是p元素的開始 </p>
<div style="display: inline">div元素1</div>
<div style="display: inline">div元素2</div>
這是p元素的結束
</p>
<script>
var p = document.querySelectorAll("p"); //查找p元素
console.log(p.length); // 3個元素
</script>
</body>
按原來的思維來說，此時應該會返回2，表示頁面中有兩個p元素，
但我們會驚訝地發現，代碼返回了3，也就表示瀏覽器解析爲3個p元素。
因此得出結論：
在p元素是不能嵌套Div元素的，它會被瀏覽器解析爲頁面中p元素的兩倍數量，也就是開始標籤被解析爲一個p元素，結束標籤被解析爲一個p元素。
元素的三個類別：
那哪些塊元素裏面不能放哪些塊元素呢？我們可以先把所有的塊元素再次劃分成幾個級別的，我們已經知道<html>是在最外層，<html>下一級裏面只會有<head>、<body>、<frameset>、<noframes>。而我們已經知道了可視的元素只會出現在<body>裏，所以我們把<body>劃在第一個級裏面，接着，把不可以自由嵌套的元素劃在第三個級，其他的就歸進第二個級。所謂的不可自由嵌套的元素就是裏面只能放內聯元素的，它們包括有：標題標記的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>；段落標記的<p>；分隔線<hr>和一個特別的元素<dt>(它只存在於列表元素<dl>的子一級)。
爲什麼說第二級的元素可以自由嵌套呢？我們可以把它們看成是一些容器（或者說是盒子）， 這些容器的大小可以自由變化，例如我們可以把<ul>嵌在<div>裏面，也可以把<div>嵌在<li>裏面。
在HTML裏有幾個元素是比較特別的：<ul>、<ol>、<dl>、<table>，它們的子一層必須是指定元素，<ul>、<ol>的子一級必須是<li>；<dl>的子一級必須是<dt>或者<dd>；<table>的子一層必須是<caption> 或<thead>、<tfoot>、<tbody>等，而再子一層必須是<tr> （<tr>只存在於<thead>、<tfoot>、<tbody>中），之後纔是可放內容的<td>或者<th>。
<img>和<input>有着其它內聯元素沒有的寬和高。它們在"inline"的情況下又有"black"的特性，W3C稱之爲replace元素。
最後總結匯總：
1、塊元素可以包含內聯元素或某些塊元素(p元素中嵌套Div元素是錯誤的做法) ，但內聯元素卻不能包含塊元素，它只能包含其他的內聯元素
2、p元素中是不能嵌套塊級元素的。
3、重點：塊狀元素的三個級別
4、內聯元素的img 與 input比較特殊，他們有內聯元素沒有的寬高，w3c定義爲replace元素，將元素設置爲display:inline-block，模擬的就是replace元素。
