Div 不会填充空白空间答案

【问题标题】：Div won't fill the empty spaceDiv 不会填充空白空间
【发布时间】：2017-11-05 07:19:23
【问题描述】：

我相信这是 CSS 的默认行为，但我不知道为什么，如果有人能解释一下，那就太好了。

内容有 3 个 div 标签（A、B、C）。 A 和 B 以 100% 的宽度（60%+40%）浮动，但它们的高度不同。 A是300px，B是400px高。 C 有 40% 的宽度，它也向左浮动。

.content {
  width: 400px;
  height: 800px;
  border: solid 1px;
}

.column-a {
  width: 60%;
  height: 300px;
  background: green;
  float: left;
}

.column-b {
  width: 40%;
  height: 400px;
  background: red;
  float: left;
}

.sub-columns {
  width: 40%;
  height: 200px;
  background: orange;
  float: left;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="content">
    <div class="column-a">A</div>
    <div class="column-b">B</div>
    <div class="sub-columns">C</div>
  </div>
</body>
</html>

我的想法是 C 被放置在 A 的正下方，因为有空间，有点似乎浏览器不会把它放在那里，因为 B div 高于 A 并且 C 出现在 B div 下。图片：

为什么会这样，C不应该放在A下面吗？

【问题讨论】：

那你的问题是什么？
@Amit 为什么会这样，不应该把C放在A下面吗？
没有。浮动不会像那样“优化”空间 - 但正如您自己所说，您已经知道这一点。不知道这里有什么问题。
这就是它在 CSS 中的工作方式。我认为最简单的解决方法是将 A 和 C 包装在单独的 div 中，这个新的 div 应该是 60% 宽。
那么在这个简单的例子中，您可以通过将B 浮动到右侧而不是左侧来简单地实现您想要的...

标签： html css

【解决方案1】：

至于为什么会发生这种情况 - 这是因为浮动元素的行为是指定这种方式的。

https://www.w3.org/TR/CSS21/visuren.html#floats 有一个名为“这里是控制浮动行为的精确规则”的列表，该列表中的第二项是：

如果当前框是左浮动的，并且源文档中存在由较早元素生成的任何左浮动框，则对于每个此类较早的框，当前框的左外边缘必须在右侧前一个盒子的右外边缘，或者它的顶部必须低于前一个盒子的底部。类似的规则也适用于右浮动框。

由于B旁边没有C的空间，“当前框的左外边缘必须在前一个框的右外边缘的右侧”部分要求无法满足 - 所以“它的顶部必须低于先前框的底部”变得适用。

您必须记住，float 基本上是 CSS“石器时代”的属性。它甚至从未打算用于创建“列布局”，而只是让文本在图像周围浮动，诸如此类的简单事情。当然，我们很长一段时间都将它用于列 - 但那是因为我们没有其他真正适合做这项工作的东西，而不是因为它是一开始就适合的工具。但是当时的浏览器还没有那么复杂，这可能是它被指定为这种方式的主要原因 - 相对容易实现（然而 Internet Explorer 设法弄乱了 浮动/清除>long 时间。）如果当时有人向浏览器开发人员扔了一个 flexbox 或网格规范，他们可能已经走了，你一定是在开玩笑吧，这种复杂性是无法用资源和计算来管理的我们在这里拥有的力量......如果这是你的要求，我们不会首先开始实施这个“CSS”的东西，你们这些疯狂的孩子 ... ;-)

【讨论】：

【解决方案2】：

这是浮动的固有行为，空间被最高元素占据。

如果你想在不借助 JS 和 masonry 插件的情况下实现这种布局，请尝试使用 flexbox。

.content {
  width: 400px;
  height: 800px;
  border: solid 1px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.column-a {
  width: 60%;
  height: 300px;
  background: green;
  order: 1;
}

.column-b {
  width: 40%;
  height: 400px;
  background: red;
  order: 3;
}

.sub-columns {
  width: 40%;
  height: 200px;
  background: orange;
  order: 2;
}

<div class="content">
  <div class="column-a">A</div>
  <div class="column-b">B</div>
  <div class="sub-columns">C</div>
</div>

小提琴： https://jsfiddle.net/mp32qjf2/1/

【讨论】：