a 標籤為什麼能夠包含塊級元素？

01-06

按照html嵌套規則行內元素不能包含塊級元素，a標籤為什麼可以包含

這個和 CSS 沒關係。而且按新的 HTML 規範，已經不按 inline 和 block 來區分元素類型了。

在規範中每個元素會規定如下兩項：

Categories
Content Model

Categories 是改元素本身的分類，content model 規定了合法的元素的內容（子元素、文本等）類型。

a 元素的 content model 為 transparent。

Some elements are described as transparent; they have "transparent" in the
description of their content model. The content model of a transparent element is
derived from the content model of its parent element: the elements required in the part of the
content model that is "transparent" are the same elements as required in the part of the content
model of the parent of the transparent element in which the transparent element finds itself.

大意就是這類元素本身內部可以有任何類型的內容，是否合法要看其父元素的 content model 和其內容的 categories。

比如我們要看 p &> ins &> a &> div 是否合法，過程是這樣的：

p 元素的 content model 是 phrasing content，ins 本身屬於 phrasing content 故可以嵌套；

ins 元素的 content model 是 transparent，故在此時裡面是否能有 a 需檢查 p &> a 的合法性；

a 元素也屬於 phrasing content，故 p &> ins &> a 合法；

a 元素的 content model 也是 transparent，故此時裡面包含 div 的合法性向上傳遞，檢查 ins &> div 又向上傳遞，變成檢查 p &> div；

div 不屬於 phrasing content，所以這個嵌套是不合法的。

路過看見

扯一嘴

非要從標準說的話

肯定跟CSS沒關係的

得看HTML標準

可是這貨呢 HTML4 和 HTML5 說法又完全不一樣

H5的鳥規範整出一堆概念

就如同 @顧軼靈說的一樣

H4 里說的簡單到爆

這部分基本就一句

「通常情況下行內級元素不能包含塊級元素」

看看通常情況下呢

所以

這句然並卵

廠商壓根不鳥

廠商鳥的只有特定規定

比如

"P元素不能包含其他塊級元素（包括P自身）"

等等

所以

H4里「不能」才有約束作用

"通常情況下不能" 就然並卵

就這樣咯

看了很多人都是從代碼、規範層面去考量的，可為什麼不從實際場景考量？鏈接的作用是什麼？可點擊跳轉，現在是什麼時代，移動互聯網，移動端已經成為了大多數的應用場景，除了文章類不需要跳轉，一個普通盒子也好，一個banner圖也好，一個引導作用的**bar也好，都是需要支持點擊跳轉的，這不再像是很久以前點擊鏈接就是點某句話或某個按鈕，而是要有更好的用戶體驗，點擊隨處可見的時代，隨之衍生出來的就是設置鏈接的時候不要忘了設置按壓態。

所以，雖然我知道js同樣可以做到點擊任何元素都跳轉，但a本身就可以包含某元素不是更好，從某種程度上更符合語義么？規範都已經改了，我們就不要繼續站在以前的認知里進行質疑了，只需要與時俱進修正我們的認知就好。

在html的規則下確實不能包含，嵌套div只會被強行截斷。不過innerHTML或appendChild則可以強行忽略，但不建議，可能有瀏覽器有未知問題。

html解析的步驟先於css生效。

在css環節則沒有這種限制。

建議你可以觀察下行內元素包含塊級元素瀏覽器會怎麼處理。標準里也明確說明了發生這種事情時應該怎樣處理。

Visual formatting model

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.
This model would apply in the following example if the following rules:
p { display: inline } span { display: block }
were used with this HTML document:
& & &Anonymous text interrupted by a block& & & & This is anonymous text before the SPAN. &This is the content of SPAN.& This is anonymous text after the SPAN. & &
The P element contains a chunk (C1) of anonymous text followed by a block-level element followed by another chunk (C2) of anonymous text. The resulting boxes would be a block box representing the BODY, containing an anonymous block box around C1, the SPAN block box, and another anonymous block box around C2.
The properties of anonymous boxes are inherited from the enclosing non-anonymous box (e.g., in the example just below the subsection heading "Anonymous block boxes", the one for DIV). Non-inherited properties have their initial value. For example, the font of the anonymous box is inherited from the DIV, but the margins will be 0.
Properties set on elements that cause anonymous block boxes to be generated still apply to the boxes and content of that element. For example, if a border had been set on the P element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line).
Some user agents have implemented borders on inlines containing blocks in other ways, e.g., by wrapping such nested blocks inside "anonymous line boxes" and thus drawing inline borders around such boxes. As CSS1 and CSS2 did not define this behavior, CSS1-only and CSS2-only user agents may implement this alternative model and still claim conformance to this part of CSS 2.1. This does not apply to UAs developed after this specification was released.

本來是不可以的，但是很多人都這麼用的，所以就可以了。

標準也是要順應民意的。

我想大多數人還是隨大六吧，隨大六的做法應該是不包含的，記得我以前剛入道也是經常寫&&&&

交給後台後，他整出來的玩意，一輸出不是溢出就是亂套，但拿到前端就是沒事，所以他還以為錯誤是他造成的，在那裡折騰了一天也沒有成功，後來老大來了，一眼看穿，好一個把我罵啊，搞的後端也對我耿耿於懷，那以後我就記住了，行內元素千萬不能包含塊級元素就是規範讓你包你也別包，會出人命的，卧槽！

原則上不行，但草坪上的小徑一樣，走的人多了就成了路。一般情況下，注意p,dt等特殊情況就可以了

我以前寫樣式經常這樣寫&&&&或者&&&&後來才知道這是錯的，因為後台快瘋了，看著a標籤總是包含在最外面，雖然效果是可以顯示出來的，但是後台已瘋

p&>div, 這個不行； a&>div單看可以

HTML5標準定義可以這麼做：

4.5 Text-level semantics

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). ...used to make an entire advertising block into a link

最新的HTML標準是a標籤不能包含div，在IE下沒事，但是在其它瀏覽器中就截斷了

何必糾結呢？有了css管他塊元素行元素。實用第一