HTML CSS 布局与浮动元素的父级中断
HTML CSS Layout breaks with parent of floated elements
我正在编写自己的网站，运行遇到了一个问题，这是我以前从未遇到过的。
我使用包含 3 个 <div> 的父 <p>。
第一个<div>是float: left;，第二个是float: right;。
第三个<div>包含clear: both;.
下面的代码是php:
如果我注释开始和结束 <p> </p> 标签，布局将完美运行。但是如果浏览器接收到 <p>，那么它会以某种方式将 <p> 变成 <p></p> 以及 </p> 变成 <p></p>。
以下两张图片取自浏览器"inspectors" in IE和Chrome:
导致的问题 是 p:first-child 没有应用到我的 <p> wich 包含 3 <div> 因为 3 <div>s 不再在 <p> 中，而是现在被 2 <p>s 包围。
这可能是一项功能，但我无法弄清楚它应该解决什么问题或如何控制它。
有什么想法吗？
The P element represents a paragraph. It cannot contain block-level
elements (including P itself).
来源：http://www.w3.org/TR/html401/struct/text.html#h-9.3.1
一个解决方案是用 div
替换您的 p
<p> 标签允许的内容是短语内容。
Click here for more info
因此，<p><div></div></p> 无效 HTML 并且浏览器将尝试在 div 开始之前关闭 p 标签。 <p></p><div></div>.
如果您提供有效的结构，浏览器将按您期望的方式运行。
您可以在 <div> 中包含一个 <div>，因此如果您将 <p> 替换为 <div>，您将得到想要的结果。
我正在编写自己的网站，运行遇到了一个问题，这是我以前从未遇到过的。
我使用包含 3 个 <div> 的父 <p>。
第一个<div>是float: left;，第二个是float: right;。
第三个<div>包含clear: both;.
下面的代码是php:
如果我注释开始和结束 <p> </p> 标签，布局将完美运行。但是如果浏览器接收到 <p>，那么它会以某种方式将 <p> 变成 <p></p> 以及 </p> 变成 <p></p>。
以下两张图片取自浏览器"inspectors" in IE和Chrome:
导致的问题 是 p:first-child 没有应用到我的 <p> wich 包含 3 <div> 因为 3 <div>s 不再在 <p> 中，而是现在被 2 <p>s 包围。
这可能是一项功能，但我无法弄清楚它应该解决什么问题或如何控制它。
有什么想法吗？
The P element represents a paragraph. It cannot contain block-level elements (including P itself).
来源：http://www.w3.org/TR/html401/struct/text.html#h-9.3.1
一个解决方案是用 div
p
<p> 标签允许的内容是短语内容。
Click here for more info
因此，<p><div></div></p> 无效 HTML 并且浏览器将尝试在 div 开始之前关闭 p 标签。 <p></p><div></div>.
如果您提供有效的结构，浏览器将按您期望的方式运行。
您可以在 <div> 中包含一个 <div>，因此如果您将 <p> 替换为 <div>，您将得到想要的结果。