Question

我遇到了这个非常有趣的事情。正在乱搞浮子和clearfix。我有一个部分（容器），其中包含3个左浮动div框，为避免容器崩溃，我使用了clearfix方法。就像之前和之后的那样，空内容，显示块和清除两者。没什么特别的。现在，为了看看这个clearfix在顶部和底部的边距是如何表现的，我在顶部，外部容器上创建了一个div框。容器的上下边距均为50px，因此效果很好。但奇怪的是，当我试图在容器外面浮动一个橙色盒子时，盒子就被容纳在容器内，并且容器中的容器。我发现这很奇怪，因为盒子不在容器的标签内，它在外面。我理解浮动元素从普通文档流中删除，因此容器的margin-top不能再继续在div框上继续，因为它已从文档流中删除，并且依赖的唯一元素是body body。但我的问题是：如果橙色盒子不是它的孩子，为什么橙色盒子被装在棕色容器内？之前：

漂浮后：对;适用于橙色盒子：

我的意思是橙色的盒子可能奇怪地被移动到任何其他地方，但是当它甚至不是容器的孩子时，容器里面没有这么好地包含，他们是兄弟姐妹。这里真的发生了什么？

代码是基本的：

<body>
<div id="box1"></div>
<section class="clearfix">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</section>
<div id="box"></div>
</body>

.clearfix:before,
.clearfix:after {
content: "";
display: block;
clear: both;
}

#box {
width: 300px;
height: 100px;
background: blue;
}

#box1 {
width: 300px;
height: 50px;
background: orange;
float: right;
}

clearfixed element

0 个答案: