我正在为HTML和CSS中的所有内容编写示例代码。我遇到display:inline并写了一些片段来解释自然块级元素（<div>）如何作为内联元素。在最近的研究中，我发现现代浏览器在<p>内遇到<div>时会自动转义<p>标记。
我可以查看我的JSFiddle示例here显示了这一点。如果您检查<p>元素，则会发现段落中的<div>不再存在。我想知道原因，因为<div>应该被视为内联元素。
谢谢！
答案 0 :(得分：4)
HTML5允许锚元素包装块级元素，但所有其他内联元素不得包含块级元素。段落元素是一个奇怪的元素，因为它实际上是块级别，但它不能包含更多的块级元素（来源：http://www.w3.org/TR/html4/struct/text.html#h-9.3.1）。
请记住，即使块级元素在设置display: inline;时可能表现为内联，但它仍然是块级元素。
答案 1 :(得分：1)
即使将它们声明为内联元素，也不能在内联元素中包含块元素。即使<p>是块元素，它们也是例外。请使用<span>，而不是默认为display: inline。
答案 2 :(得分：0)
<p>可能包含内联元素和文本，但不包含其他块元素。 （除此之外，对于HTML解析器，块元素是一个块元素......即使其CSS指定display: inline。）当块元素出现在其中时，<p>结束于另一个元素开始。
答案 3 :(得分：0)
即使您更改其显示属性，DIV也是块级元素。这段内容不允许，因此行为未定义。有了这种理解，浏览器会纠正HTML以使其有意义似乎是合理的。
引用the spec：
P元素代表一个段落。它不能包含块级元素（包括P本身）。
答案 4 :(得分：-1)
显然
不要将块元素放在内联元素中。如果你这样做，在大多数情况下，不会发生任何不好的事情。
可能我们很多人都会这样做而且似乎有效，但它已经去了＃34;去了 地狱＆＃34;不正确。块元素可视地从新行开始。 它们可以包含内联和其他块级元素（div，p，ul， 等）。内联元素在视觉上不会在新行上开始。他们 仅包含文本和其他内联元素（span，a，img等）。
您可能想知道块级元素（）和使用CSS将内联元素作为块级元素（）之间的区别是什么。
如果默认情况下的元素（如div）是块级元素，则它不能放在内联元素中。但是，通过CSS制作成块级元素的内联元素可以放在内联元素中。这是因为应用的样式与标记的正确性无关。换句话说，样式是我们对元素应该是什么样子并且与有效标记完全分开的声明。