Question

请参阅下面的代码。当我在浏览器中打开页面时，我看到段落的文本远远超出了它的框边界。

我在某处读到了“正常流程”中其他元素忽略了浮动元素。在这种情况下，<p>应该表现得好像div不在那里。段落边界的位置有点支持这个想法，但它的文本在边界之外而不是在左上角。

它似乎不是一个错误，因为它在IE11，Firefox和Chrome中的行为相同。此行为是否由任何HTML标准指定？谢谢！

<html>
  <body>
    <div style="border: solid 5px; width: 200px; height: 200px; float:left"></div>
    <p style="border:solid red 5px;width:100px;height:100px;">hello world</p>
  </body>
</html>

编辑：感谢回复人！但我并不打算要求将段落文本放在div中的方法。我只是想知道为什么段落边界包含在div中，而它的文本在外面。这种布局概念对我来说没有意义。

Answer 1

尝试

<div style="border: solid 5px; width: 200px; height: 200px; float:left">
    <p style="border:solid red 5px;width:100px;height:100px;">
         hello world
    </p>
</div>

Answer 2

您在<p>标记之外使用了<div>标记。您需要在关闭<p>之前写下</div>代码，以便它保留在框内

<html>
<body>
    <div style="border: solid 5px; width: 200px; height: 200px; float:left">
        <p style="border:solid red 5px;width:100px;height:100px;">hello world</p>
    </div>
  </body>
</html>

Answer 3

这是因为默认情况下p和div都是阻止级别元素。这两个元素都从top和left方向开始。

当您将float:left属性赋予div时，它会向左浮动，但不会出现div浮动。有几种方法，其中一种方法正在使用position。

您可以使用position:absolute;

修复它

div{
position:absolute;
left:0px;
top:10px;
}

以下是工作 Demo 。

Answer 4

如果您希望hello world内有div文字，则应在div内使用para。如果div之外的para，那么它将显示在div之外。您无需使用float:left;

--div
  --p
    hello world

您的代码结构应该是

<div style="border: solid 5px; width: 200px; height: 200px;">    
  <p style="border:solid red 5px;width:100px;height:100px;">hello world</p>
</div>

Answer 5

Aishvarya karthik分享的上述代码是正确的，但您可以通过删除float:left属性来优化furthur，因为您不需要使用该属性，因为输出保持不变

 <div style="border: solid 5px; width: 200px; height: 200px;">
     <p style="border:solid red 5px;width:100px;height:100px;">hello world</p>
 </div>

<p>文本超出了它的块边界</p>

5 个答案: