我知道在内联元素中放置块级元素是不对的，但以下内容怎么样呢？
想象一下这个有效的标记：
<div><p>This is a paragraph</p></div>
div {
display:inline;
}
这会导致内联元素包含块级元素（div 变成内联元素，默认情况下 p 是块级元素）。
页面元素还有效吗？
我们何时以及如何判断 HTML 是否有效 - 在应用 CSS 规则之前还是之后？
更新：我后来了解到，在 HTML5 中，将块级元素放入链接标记中是完全有效的，例如：
<a href="#">
<h1>Heading</h1>
<p>Paragraph.</p>
</a>
如果你想让一个大块的HTML作为链接，这实际上非常有用。
来自CSS 2.1规范：
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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HEAD> <TITLE>Anonymous text interrupted by a block</TITLE> </HEAD> <BODY> <P> This is anonymous text before the SPAN. <SPAN>This is the content of SPAN.</SPAN> This is anonymous text after the SPAN. </P> </BODY>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.
你可以根据自己的理解来处理这个问题。显然，这种行为是在CSS中指定的，但它是否涵盖了所有情况，或者在今天的浏览器中是否实现一致，目前还不清楚。
<div><a><span>Some text</span></a></div>的情况。这里所有元素都有它们正常的显示属性，但是我使用了带有一些文本内容的<span>的::after 伪元素，并将该伪元素设置为块级元素。该元素是div的子元素，而div的子元素是a，a的子元素是span。由于内联元素不支持宽度，所以在这里如何使宽度100%的块级元素起作用？我感觉自己像处于匿名盒子场景中，你能指点我正确的方向吗？谢谢。 - Marius Mucenicu无论是否有效，元素结构都是错误的。不将块级元素放在内联元素中的原因是浏览器可以轻松预测元素的呈现方式。
即使它对HTML或CSS都没有违反任何规则，它仍会创建无法按预期呈现的元素。浏览器必须像处理无效的HTML代码一样处理这些元素。
a上嵌套了span display="block"。http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - mgPePedisplay:block，以使其填满单元格的宽度。 - bobince<a><span style="display:block"></span>[..more spans]</a> 吗？另外，如果我将 vertical-align: middle 应用于 span 块，这样做是否有效？ - mgPePe如果你有一种逻辑并最终像这样实现它，那么它并不是错误的。奇怪的东西并不是因为它们奇怪就是“错误”的。是的，这很不寻常，但它有帮助，而且不是错误。这是有意为之的。HTML和CSS应该为您服务，而不是相反，所以永远不要听取评论，告诉您不要这样做，只因为它很丑陋。
通常会将解决方案称为“无效”，并建议绕过长路。有时您可以重新考虑自己的做法。但是可能有许多原因导致您这样做，而他们并没有考虑到。
我经常在内联中使用块。它是有效的，并且正在工作-在大多数情况下并不是必需的。那又怎样。还记得XHTML告诉我们始终在属性周围加上引号（如果你不这样做，每个人都会对你大喊大叫！），现在HTML5允许在没有空格的情况下省略它们。最后一个斜杠发生了什么？"<br />"？来吧。标准改变了。但是浏览器仍然支持非标准的东西。CENTER已被弃用；我们在2013年，它仍然有效。TABLE用于垂直居中？有时这是唯一的方法。DIV内部A使其像您计划的那样悬停？继续吧。
专注于重要的事情。
我认为，(x)html是有效的，css也是有效的。结果是否有效？如果在浏览器中呈现的效果符合您的要求，那么是有效的。