Question

我试图学习div定位和css我的问题是为什么蓝色方块出现在红色的顶部，当它写在它下面以及如何将它移动到红色以下，而红色和绿色停留在它们所在的位置。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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行为。因此，蓝色框的边缘顶部与身体的边缘顶部相互矛盾，因为蓝色框是身体的第一个流入儿童;因此所有元素都被按下，因为所有元素都包含在正文中。蓝色方框是从左边沿着边缘向左推进的。

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

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>

Answer 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>

Answer 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>

Div定位和浮动选项

3 个答案: