Div 定位和浮动选项答案

【问题标题】：Div positioning and float optionsDiv 定位和浮动选项
【发布时间】：2018-05-03 19:59:35
【问题描述】：

我正在尝试学习 div 定位和 css 我的问题是为什么当蓝色方块写在它下面时，它会出现在红色方块的顶部，以及如何将它移动到红色下方，而红色和绿色则保持原位。

body {
  margin: 0;
  padding: 0;
}

.square {
  width: 50px;
  height: 50px;
  margin: 50px;
}

#red {
  background-color: red;
  float: left;
}

#green {
  background-color: green;
  float: right;
}

#blue {
  background-color: blue;
}

<div class="square" id="red"></div>
<div class="square" id="green"></div>
<div class="square" id="blue"></div>

【问题讨论】：

@mtr.web 那不正确。向左浮动的蓝色会将其拉到红色的右侧。
CSS Float Logic的可能重复
@TylerH 我希望它不会因为这个问题而被关闭，因为它不仅是浮动逻辑，而且还不止于此；）
@TemaniAfif 我不关注；通过解释 CSS Floats 的工作原理来回答这个问题。这就是我所链接的问题所接受的答案非常引人注目的原因。
@TylerH 但接受的答案（不幸的是）并没有解释一切......因为涉及边距折叠，这使得行为不同于简单的浮动行为。检查我的答案以了解我的意思（尤其是最后一个 sn-p 代码）

标签： html css

【解决方案1】：

让我们从一一添加不同的属性开始。最初，如果我们不设置边距和浮动，我们将在彼此下方有 3 个框，如下所示：

body {
  margin: 0;
  padding: 0;
}

.square {
  width: 50px;
  height: 50px;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

#blue {
  background-color: blue;
}

<div class="square" id="red"></div>
<div class="square" id="green"></div>
<div class="square" id="blue"></div>

到目前为止，结果是合乎逻辑的。现在让我们为元素添加浮点数：

body {
  margin: 0;
  padding: 0;
}

.square {
  width: 50px;
  height: 50px;
}

#red {
  background-color: red;
  float: left;
}

#green {
  background-color: green;
  float: right;
}

#blue {
  background-color: blue;
}

<div class="square" id="red"></div>
<div class="square" id="green"></div>
<div class="square" id="blue"></div>

绿色框浮动在右侧（逻辑结果），红色框浮动在左侧并在蓝色框上方，所以这个被隐藏了。这种行为是因为：

float CSS 属性指定应该放置一个元素沿着其容器的左侧或右侧，允许文本和 内联元素来环绕它。该元素已从网页的正常流程，虽然仍然是流程的一部分^ref

由于蓝色框是块元素并且属于同一个容器，它不会环绕浮动元素；因此浮动元素（红色框）将在其上方。

现在让我们为蓝色框（非浮动元素）添加边距

body {
  margin: 0;
  padding: 0;
}

.square {
  width: 50px;
  height: 50px;
}

#red {
  background-color: red;
  float:left;
}

#green {
  background-color: green;
  float:right;
}

#blue {
  background-color: blue;
  margin:50px;
}

<div class="square" id="red"></div>
<div class="square" id="green"></div>
<div class="square" id="blue"></div>

我们看到所有元素都被向下推了 50px，而蓝色框被向左推了 50px。

为什么会这样？

在这里，我们面临着带有蓝色框和主体的margin-collapsing 行为。所以蓝色盒子的margin-top与body的margin-top是collpased，因为蓝色盒子是body的第一个流入子；因此 all 元素被下推，因为它们都包含在 body 中。蓝色框是从左边用margin-left逻辑推入的。

现在我们将边距添加到浮动元素，这些边距将从其先前位置从顶部和左侧（红色）/右侧（绿色）推送：

body {
  margin: 0;
  padding: 0;
}

.square {
  width: 50px;
  height: 50px;
    margin:50px;
}

#red {
  background-color: red;
  float:left;
}

#green {
  background-color: green;
  float:right;
}

#blue {
  background-color: blue;
}

<div class="square" id="red"></div>
<div class="square" id="green"></div>
<div class="square" id="blue"></div>

现在为了避免上述行为，您需要清除浮动并避免marign-collapsing：

body {
  margin: 0;
  padding: 0;
}

.square {
  width: 50px;
  height: 50px;
  margin:50px;
}

#red {
  background-color: red;
  float:left;
}

#green {
  background-color: green;
  float:right;
}

#blue {
  background-color: blue;
  clear:both;/*clear float and this will also avoid margin collapsing with body*/
}

<div class="square" id="red"></div>
<div class="square" id="green"></div>
<div class="square" id="blue"></div>

如果您只避免边缘折叠行为，您将获得以下输出：

body {
  margin: 0;
  padding: 1px; /*avoid margin collapsing with body*/
}

.square {
  width: 50px;
  height: 50px;
  margin:50px;
}

#red {
  background-color: red;
  float:left;
}

#green {
  background-color: green;
  float:right;
}

#blue {
  background-color: blue;
}

<div class="square" id="red"></div>
<div class="square" id="green"></div>
<div class="square" id="blue"></div>

【讨论】：

是的，您的最后一个代码正是我这里的代码，但我想将蓝色框移到红色下方
@kushagragupta 我给了你为什么你有这种行为的答案:) 我会添加如何解决它
@kushagragupta 我在最后添加了修复 ;) 了解正在发生的事情比在没有解释的情况下获得修复更重要

【解决方案2】：

您需要清除浮动元素。针对您的情况，有几种流行的方法可以做到这一点。

您可以在最后一个浮动元素之后添加<div style="clear: both"></div>，或者您可以创建一个 clearfix 类并将您的浮动元素包装在其中。

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

body {
  margin: 0;
  padding: 0;
}

.square {
  width: 50px;
  height: 50px;
  margin: 50px;
}

#red {
  background-color: red;
  float: left;
}

#green {
  background-color: green;
  float: right;
}

#blue {
  background-color: blue;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

<div class="clearfix">
  <div class="square" id="red"></div>
  <div class="square" id="green"></div>
</div>
<div class="square" id="blue"></div>

【讨论】：

@TemaniAfif 我不知道 OP 正在询问折叠边距...我认为这只是一个关于清除浮动的问题
他不是在问关于折叠边距或浮动 :) 他是在问为什么会出现这种行为......但我认为他对修复比了解正在发生的事情更感兴趣（这对我来说更重要）跨度>
@TemaniAfif 我同意...理解比复制粘贴更重要
如果你尝试他的代码只移除margin-collapsing（就像我在asnwer末尾所做的那样）你会看到一个完整的新行为，这意味着margin-collapsing正在产生重要影响在这里;）

【解决方案3】：

在蓝色 div 中添加 clear: both;，如下所示：

#blue {
   background-color: blue;
   clear:both;
}

说明：

当我们将任何具有 CSS 属性 float: left/right; 的元素保留在除 IE 之外的任何容器中时，所有其他现代浏览器都不会增加基于容器高度的浮动元素高度，直到您不清除浮动。并且浏览器的处理容器元素除了非浮动元素之外没有任何内容，这就是为什么浏览器将您的.blue div 设置在顶部位置。

如何克服明显的浮动问题？

我们可以通过两种方式解决浮动问题。一种是在容器元素的最后位置保留一个具有 CSS 属性 clear: both; 的元素，如下所示：

<div class="float-left"></div>
<div class="float-right"></div>
<div class="clear"></div>

.float-left { float: left;}
.float-right { float: right;}
.clear { clear: both;}

另一种现代方式是使用伪元素。我们知道每个元素都有两个伪元素:before 和:after。我们可以通过以下方式应用clear: both; 属性：

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.float-left { float: left;}
.float-right { float: right;}

<div class="clearfix">
    <div class="float-left"></div>
    <div class="float-right"></div>
</div>

【讨论】：