Question

我只面临div内浮动元素的问题，这就是问题所在：

＆＃13;

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

＆＃13;

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

＆＃13;

我需要解释第二个DIV的边界及其内容位置。为什么边界落后但内容在第一个div之下？

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

使用浮点数的一个更令人困惑的事情是它们如何影响包含它们的元素（它们的＆＃34;父元素＃34;元素）。如果这个父元素只包含浮动元素，那么它的高度就会崩溃为零。如果父母不包含任何视觉上明显的背景，这并不总是显而易见的，但重要的是要注意。

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

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

Answer 1

这是应该如何绘制元素的逻辑行为，但是你遇到了一个溢出问题，以及浮点如何工作，这使得事情奇怪。

让我们删除一些属性，然后按照步骤操作。让我们从overflow:auto移除main，从.second移除固定高度

＆＃13;

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

＆＃13;

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

＆＃13;

正如您所看到的，浮动元素绿色位于蓝色 div之上，并且只围绕其内容即文本浮动。就像你可以阅读here：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

下看到蓝色的原因

现在，如果我们为蓝色元素添加固定高度，您将面临溢出问题，因此蓝色内容将保持在外（如上一代码中所示）但是定义元素限制的边框将位于绿色元素的后面（如在绘制顺序中所描述的）

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

＆＃13;

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

＆＃13;

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

＆＃13;

您还可以清楚地看到main 黄色元素的高度跟随蓝色元素的高度，因为它是解释您的第二个元素的唯一插入元素关于浮动没有被考虑在其父元素的高度的问题但是通过添加overflow:auto你将创建一个新的堆叠上下文，因此该元素将表现不同并将考虑浮动元素的高度：

＆＃13;

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

＆＃13;

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

＆＃13;

在这最后，你可以清楚地看到溢出问题，使文字在蓝色 div之外，因为oveflow:auto正在添加滚动条。

Answer 2

将float属性添加到任何div时，其父级将停止采用浮动属性的任何高度。并且在浮动div之后添加的任何内容都会使父级占据其高度。如果您删除了overflow: auto，您将看到父级将仅采用第二个非浮动元素的高度。尽管overflow：auto解决了父级没有达到完全高度的问题，但它并没有解决非浮动元素从父元素的开头占用空间的问题（而不是浮动元素之后）。

所以要解决这个问题，你需要清除第一个div上应用的浮点数，这样你的下一个div（非浮点数）就会低于浮动div，浮动和非浮动div都会达到所需的高度。

有关float

的更多信息，请参阅此link

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

浮动元素的行为

2 个答案: