html - Div定位和 float 选项

Question

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

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>

Answer 1

让我们从一个一个地添加不同的属性开始。最初，如果我们不设置边距和 float ，我们将像这样将 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>

到目前为止，结果是合乎逻辑的。现在让我们向我们的元素添加 float :

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>

绿色框漂浮在右侧(逻辑结果)，红色框漂浮在左侧和蓝色框上方，因此这个框被隐藏了。这种行为是因为:

The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow^ref

因为蓝色框是 block 元素并且属于同一个容器，所以它不会环绕 float 元素；因此 float 元素(红色框)将位于其上方。

---

现在让我们给蓝色框(非 float 元素)添加边距

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蓝色框和 body 的行为。所以蓝色框的顶部边距与主体的顶部边距折叠在一起，因为蓝色框是主体的第一个流入子节点；因此，所有 元素都被下推，因为它们都包含在正文中。蓝色框逻辑地从左边距向左推。

现在我们向 float 元素添加边距，这些元素将从它们之前的位置从顶部和左侧(对于红色)/右侧(对于绿色)推出:

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>

---

现在为了避免上述行为，您需要清除 float 并避免 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>