我的问题是，为什么应该在红色和海军 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>
我在代码中尝试了使用边距和切换元素位置的不同组合，它们产生了不同的结果。
我觉得很难理解。希望有人可以解释这一点。谢谢。
最佳答案
如果你想让一个div的内容限制在你定义的div的大小，你必须定义它的溢出属性:
div{
padding: 10px;
width: 200px;
height: 200px;
border: 2px solid gray;
color: white;
overflow:none;
}
编辑:
溢出不影响定位。它限制内容以适合您设置的尺寸。发生的情况是您的粉红色 div 是 float 的，但也有 150 像素的边距，因此红色和蓝色 div 的所有内容都被推到该边距之外，而容器保持在原处。
将 overflow 设置为 hidden 会强制内容在容器内部，同时将容器推到边缘之外。
如果您希望容器在其中包含文本并且与它们现在的方向相同，我建议绝对定位它们。
关于html - 为什么某些 div 中的内容显示在其框外？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21897175/