浮动元素行为

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的边框及其内容位置的说明。为什么边框在后面但内容在第一格之下？

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

关于浮点数的更令人困惑的事情之一是它们如何影响包含它们的元素（它们的“父”元素）。如果此父元素只包含浮点元素，则其高度实际上将崩溃为零。如果父母不包含任何视觉上可察觉的背景，这并不总是很明显，但是要意识到这一点很重要。

我需要澄清为什么会这样。

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

Answer 1

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

让我们删除一些属性，并逐步遵循代码。首先让我们来消除overflow:auto来自main从固定高度.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>

如您所见， 绿色 的浮动元素位于 蓝色 div
上方，并且仅围绕其内容（文本）浮动。就像你可以在这里阅读：

float CSS属性指定一个元素应沿着其容器的左侧或右侧放置，从而允许 text和 inline元素环绕其周围
。尽管仍保留了一部分内容（与绝对定位相反），但该元素已从网页的 常规流程 中删除 。

并且由于两者div的 宽度相同， 因此文本将在底部而不是右侧。你可以改变width的的 蓝色 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;

  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>

现在，如果您检查绘画顺序，您将看到我们首先在步骤（4）中打印块非浮动元素的边框/背景，然后在步骤（5）中打印浮动元素，然后打印非元素的内容步骤（7）中的-
floating元素，解释了为什么在 绿色* 下看到 蓝色 *

现在，如果我们将固定高度添加到 蓝色 元素上，您将面临 溢出 问题，因此蓝色的内容将保留在外部（如上一代码），但是定义元素限制的边框将在
绿色 元素后面（就像paiting顺序中描述的那样）

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

.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 黄色
元素的高度紧随蓝色元素的高度，因为它是唯一的流入元素，通过添加overflow:auto您将创建的第二个问题，您的浮点数在其父元素BUT的高度中未被考虑块格式化上下文，因此该元素的行为将有所不同，并将考虑内部浮动元素的高度：

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

在这最后一章中，您可以清楚地看到溢出问题，这是由于添加了滚动条而使文本位于 蓝色 div 之外oveflow:auto。