clearfixed 元素上方的浮动元素答案

【问题标题】：Floating elements above clearfixed elementclearfixed 元素上方的浮动元素
【发布时间】：2016-12-21 05:20:06
【问题描述】：

我遇到了这个非常有趣的事情。正在摆弄花车和clearfix。我有一个包含 3 个左浮动 div 框的部分（容器），为了避免容器折叠，我在其上使用 clearfix 方法。就像之前和之后那样，清空内容，显示块和清除两者。没什么特别的。现在，为了看看这个 clearfix 在顶部和底部的边距如何表现，我在容器外部的顶部创建了一个 div 框。容器的顶部和底部边距均为 50 像素，因此效果很好。但奇怪的是，当我试图将一个橙色的盒子漂浮在容器外时，盒子变成了容器内的容器，对容器的孩子表示敬意。我觉得这很奇怪，因为那个盒子不在容器的标签内，而是在外面。我知道浮动元素已从正常文档流中删除，因此容器的 margin-top 无法再在 div 框上中继，因为它已从文档流中删除，唯一依赖的元素是 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;
}

【问题讨论】：

请为一二三类添加css。
.one { 背景：rgb(207, 255, 245);float: left; } .two { 背景：rgb(101,209,255);向左飘浮; } .three { 背景：rgb(255, 231, 181);向左飘浮; }

标签： css css-float clearfix

【解决方案1】：

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

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

【讨论】：

这可以简化为.clearfix { clear: both; }，不需要额外的标签。
@Aziz 我没有使用额外的标签，但 op 这样做是在告诉他说清楚。没有别的。