clearfixed 元素之上的浮动元素

Question

我遇到了一件非常有趣的事情。正在摆弄花车和 clearfix。我有一个部分（容器），其中包含 3 个左浮动 div 框，为了避免容器折叠，我在其上使用了 clearfix 方法。就像之前和之后的那个一样，清空内容，显示块和清除两者。没什么特别的。现在，为了查看此 clearfix 如何处理顶部和底部的边距，我在容器外部的顶部创建了一个 div 框。容器的顶部和底部边距均为 50 像素，因此效果很好。但奇怪的是，当我试图将一个橙色的盒子漂浮在容器外时，盒子变成了容器内的容器，恭敬地包含在容器的 childs 中。我觉得这很奇怪，因为那个盒子不在集装箱标签内，而是在外面。我知道浮动元素已从正常文档流中删除，因此容器的 margin-top 无法再中继 div 框，因为它已从文档流中删除并且唯一依赖的元素是 body left。但我的问题是：如果橙色盒子不是 child，为什么橙色盒子会包含在棕色容器中？之前：

浮动后：对；应用于橙色框：

我的意思是橙色盒子本来可以奇怪地移动到任何其他地方，但当它甚至不是 child 容器时，就不能很好地包含在容器内，他们是兄弟姐妹。这里到底发生了什么？

基本代码：

<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;
}

Answer 1

正如您提到的，您在橙色框上使用 float:right 并进入其他 div 是的，您在使用浮动后没有使用 clear:both。请记住，如果您在 on 部分之前和之后使用 clearfix 将不起作用。您必须在浮动 div 之后立即使用 clear:fix ，否则它会中断流程并导致您所看到的问题。

见demo。我只是在向右浮动 div 后使用 clear:both，一切似乎都很好。为了使它更简单，请尝试在使用 float:right 或 left 时清除，您不会遇到任何问题。如果你在最后一个 li 之后仍然使用 ul li 标签得到这个，请使用 clear div 你就完成了。希望对您有所帮助。

clearfixed 元素之上的浮动元素

Floating elements above clearfixed element

css

css-float

clearfix