Question

我认为这是CSS的默认行为，但我不确定为什么，如果有人可以解释它会很棒。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

为什么会发生这种情况，不应该将C置于A？

之下

Answer 1

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

https://www.w3.org/TR/CSS21/visuren.html#floats有一个标题为“以下是管理浮动行为的精确规则”的列表，该列表中的第二项是：

如果当前框是左浮动的，并且源文档中较早的元素生成了任何左浮动框，则对于每个此类较早的框，要么当前框的左外边缘必须在右侧早期框的右外边缘，或其顶部必须低于前一个框的底部。类似的规则适用于右浮箱。

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

你必须记住，float基本上是CSS的“石器时代”的属性。创建“列布局”从来都不是用于，而只是让文本浮动图像，这样简单的东西。当然我们长时间使用它作为列 - 但那是因为我们没有其他任何东西真正适合做这项工作，而不是因为它是开始使用它的合适工具。但当时的浏览器要复杂得多，这可能是它以这种方式指定的主要原因 - 相对容易实现（尽管如此，Internet Explorer设法搞乱浮动/清除很久时间。）当时有人向浏览器开发人员抛出了一个flexbox或网格规范，他们可能已经离开了，你一定是在开玩笑吧，这种复杂性对于资源和计算是无法管理的我们在这里可以获得的力量...如果这就是你所要求的，我们就不会费心去开始实施这个“CSS”的东西，你疯狂的孩子 ...; - ）

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Div不会填补空白区

2 个答案: