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，指文本段落的意思。