浮动元素行为

Question

我只在 div 内遇到浮动元素的问题，问题出在：

.main{	
    border-style:solid;
    border-color:yellow;
    overflow:auto;	
}

.first {
    width:200px;
    height:100px;
    float: left;
    border: 10px solid green;
}
.second {
width:200px;
    height: 50px;
    border: 10px solid blue;
}

<div class="main">
<div class="first">test1</div>
<div class="second" >test2</div>
</div>

我需要关于第二个 DIV 的边框及其内容位置的说明。为什么边框在后面，而内容在第一个div下面？​​

---

也根据：https://css-tricks.com/all-about-floats/#article-header-id-3

使用浮点数更令人困惑的事情之一是它们如何影响包含它们的元素（它们的“父”元素）。如果这个父元素只包含浮动元素，它的高度实际上会崩溃到什么都没有。如果父级不包含任何视觉上明显的背景，这并不总是很明显，但要注意这一点很重要。

我需要澄清为什么会发生这种情况。

编辑：我要求解释这两个问题的行为，而不是如何解决它。

Answer 1

这是应该如何绘制元素的逻辑行为，但是您遇到了溢出问题以及浮动的工作方式，这让事情变得奇怪。

让我们删除一些属性并按照代码一步一步来。让我们从main 中删除overflow:auto 和.second 中的固定高度开始

.main {
  border-style: solid;
  border-color: yellow;
 /* overflow: auto;*/
}

.first {
  width: 200px;
  height: 100px;
  float: left;
  border: 10px solid green;
}

.second {
  width: 200px;
  /*height: 50px;*/
  border: 10px solid blue;
}

<div class="main">
  <div class="first">test1</div>
  <div class="second">test2</div>
</div>

如您所见，浮动元素 green 位于 blue div 上方，并且仅围绕其文本内容浮动。喜欢你可以阅读here：

float CSS 属性指定应该放置一个元素 沿着其容器的左侧或右侧，允许 文本和 内嵌元素来环绕它。该元素已从 网页的正常流程，但仍是流程的一部分 （与绝对定位相反）。

由于div 的宽度相同，因此文本将位于底部而不是右侧。您可以更改 blue div 的 width 以查看差异：

.main {
  border-style: solid;
  border-color: yellow;
 /* overflow: auto;*/
}

.first {
  width: 200px;
  height: 100px;
  float: left;
  border: 10px solid green;
}

.second {
  width: 200px;
  /*height: 50px;*/
  border: 10px solid blue;
  animation:change 1s infinite alternate linear;
}

@keyframes change{
 from{width:200px}
 to{width:400px}
}

<div class="main">
  <div class="first">test1</div>
  <div class="second">test2</div>
</div>

现在，如果您检查painting order，您会看到我们首先在步骤（4）中打印块非浮动元素的边框/背景，然后我们在步骤（5）中打印浮动元素，然后我们打印步骤 (7) 中非浮动元素的内容，这解释了为什么您会在 green

下看到 blue

---

现在，如果我们为 blue 元素添加一个固定高度，您将面临 overflow 问题，因此蓝色的内容将留在外面（就像在前面的代码中一样）但是定义元素限制的边框将在 green 元素后面（如绘制顺序中所述）

这是一个带有动画的代码，可以更好地理解正在发生的事情：

.main {
  border-style: solid;
  border-color: yellow;
 /* overflow: auto;*/
}

.first {
  width: 200px;
  height: 100px;
  float: left;
  border: 10px solid green;
}

.second {
  width: 200px;
  border: 10px solid blue;
  animation:change 2s infinite alternate linear;
}

@keyframes change {
  from{height:300px;}
  to{height:50px;}
}

<div class="main">
  <div class="first">test1</div>
  <div class="second">test2</div>
</div>

您还可以清楚地看到main yellow 元素的高度跟随蓝色元素的高度，因为它是唯一的流入元素，可以解释您关于未考虑浮动的第二个问题在其父元素的高度中，但通过添加overflow:auto，您将创建一个块格式化上下文，因此该元素的行为将有所不同，并将考虑内部浮动元素的高度：

.main {
  border-style: solid;
  border-color: yellow;
  overflow: auto;
}

.first {
  width: 200px;
  height: 100px;
  float: left;
  border: 10px solid green;
}

.second {
  width: 200px;
  border: 10px solid blue;
  animation:change 2s infinite alternate linear;
}

@keyframes change {
  from{height:300px;}
  to{height:50px;}
}

<div class="main">
  <div class="first">test1</div>
  <div class="second">test2</div>
</div>

在最后你可以清楚地看到溢出问题导致文本超出 blue div，因为oveflow:auto 正在添加滚动条。

Answer 2

当您将浮动属性添加到任何 div 时，其父级将停止采用浮动属性的任何高度。在浮动的 div 之后添加的任何内容都被父级占用了它的高度。如果您删除了overflow: auto，您将看到父级将仅采用第二个非浮动元素的高度。虽然 overflow:auto 解决了 parent 不占用完整高度的问题，但并没有解决非浮动元素从父元素开始（而不是浮动元素之后）占用空间的问题。

因此，要解决此问题，您需要清除应用于第一个 div 的浮动，以便您的下一个 div（非浮动）低于浮动 div，并且浮动和非浮动 div 都具有所需的高度。

请参阅link 了解有关浮动的更多信息

我通常使用clearfix类的方法来解决这样的问题。

.clearfix {
  content: "";
  clear: both;
  display: table;
}

.clearfix {
  content: "";
  clear: both;
  display: table;
}

.main {
  border-style: solid;
  border-color: yellow;
  overflow: auto;
}

.first {
  width: 200px;
  height: 100px;
  float: left;
  border: 10px solid green;
}

.second {
  width: 200px;
  height: 50px;
  border: 10px solid blue;
}

<div class="main">
  <div class="first">test1</div>
  <div class="clearfix"></div>
  <div class="second">test2</div>
</div>

.clearfix {
  content: "";
  clear: both;
  display: table;
}

.main {
  border-style: solid;
  border-color: yellow;
  overflow: auto;
}

.first {
  width: 200px;
  height: 100px;
  float: left;
  border: 10px solid green;
}

.second {
  width: 200px;
  height: 50px;
  border: 20px solid blue;
}

<div class="main">
  <div class="first">test1</div>
  <div class="second">test2</div>
</div>