Question

我的问题是为什么应该在红色和海军div框内的内容显示在框外？是什么让他们将内容移到框外？

<!DOCTYPE html>
<html>
   <head>
      <title>tester</title>
      <style>       
         div { padding: 10px; width: 200px; height: 200px; border: 2px solid gray; color: white;}   
         .floated {float: left; margin: 150px; background-color: fuchsia; color: white; }       
         .pos {position: relative; background-color: red; } 
         .normal {background-color: navy; }
      </style>
   </head>
   <body>
      <div style="margin: 200px; background: green; width: 600px; height: 600px">
         <div class="floated">
            <p>Floated Floated Floated Floated Floated Floated Floated Floated Floated Floated Floated Floated Floated Floated Floated Floated Floated Floated Floated Floated </p>
         </div>
         <div class="pos">
            <p>Relatively positioned Relatively positionedRelatively positionedRelatively positionedRelatively positionedRelatively positionedRelatively positioned</p>
         </div>
         <div class="normal">
            <p>Normal div Normal divNormal divNormal divNormal divNormal divNormal divNormal div</p>
         </div>
      </div>
   </body>

我尝试了使用边距的不同组合并切换代码中元素的位置，它们会产生不同的结果。

我发现很难理解。希望有人可以解释这一点。感谢。

Answer 1

如果你想将div的内容限制在你定义的div的大小，你必须定义它的溢出属性：

div{
    padding: 10px;
    width: 200px;
    height: 200px;
    border: 2px solid gray;
    color: white;

    overflow:none;
}

编辑：

溢出不会影响定位。它将内容限制在您设置的尺寸内。发生的事情是你的粉红色div浮动，但也有150px的边距，所以红色和蓝色div的所有内容都被推到了边缘之外，而容器保留在它们所在的位置。

将溢出设置为隐藏会强制内容位于容器内部，同时将容器推出边距。

如果你想让容器里面有文字，并且它们的方向与你现在的方向相同，我建议绝对定位它们。

Answer 2

浮动元素不是正常布局的一部分。它们将在稍后单独绘制。 DIV是块级元素，它们在开始和结束时都有换行符。你的文字是p元素。由于换行，它们被推到了div之下。

删除div {height：200px; }，文本将在预期的框内呈现

Answer 3

在css div中使用overflow。欲了解更多信息，请访问以下链接

http://www.w3schools.com/cssref/pr_pos_overflow.asp

<强>更新

我的问题是为什么应该在红色和海军div框内的内容显示在框外？是什么让他们将内容移到框外？

哎呀，这不是溢出问题。抱歉。

使文本在框内正确显示：

1）在.pos和.normal

中添加“float：left”

.pos {float:left;position: relative; background-color: red; }   
.normal {float:left;background-color: navy; }

现在文本显示在框内。但是盒子位置不好。

注意：三个div（.floated，.normal，.pos）由div包装。所以如果你在其中一个中使用float：left，你应该在另一个div中使用float：left。或删除.floated中的float：left。（这不是一个绝对的规则。如果你对css有问题，只需调整它直到得到你想要的东西。）

2）修复盒子位置：从.floated

中移除边距：150px

enter image description here

希望这是帮助

Answer 4

我发现正确的答案是因为HTML / CSS Stacking Contexts。令我感到惊讶的是，没有人甚至谈论渲染过程或堆叠上下文来帮助正确回答我的问题，而大多数上述答案都集中在如何通过更改CSS来缓解问题。我的观点不是要改变CSS以影响显示，而是要更深入地了解正在发生的事情。因此，如果有人在理解为什么以奇怪的方式显示事物时遇到问题，那么理解堆叠上下文可能会更好地理解。

看起来有些人甚至倒了我的问题投票，我没有看到任何其他地方提出我的问题，我认为stackoverflow会很好地提出我的问题，所以，我不知道为什么下来投票。但是，没有一个答案指向正确的方向，为什么选票呢？

为什么某些div内的内容显示在他们的框外？

4 个答案:

编辑：