左浮动元素不向上

Question

我正在使用 float 属性进行练习，目前我有一个 html 是这样的：

section {
  display: inline-block;
  float: left;
  width: 300px;
  height: 100px;
  border: solid;
  margin: 3px;
}

<section style="margin-left: 150px;"> </section>
<section style="height: 300px;"></section>
<section></section>
<section> </section>
<section style="height: 300px; width: 3px; background-color: blue;"></section>

我不明白的是，最后一个部分元素（蓝色框）并没有一直向上，而是 "fixed" 有点向下。是什么原因，我该如何解决？（不链接 fiddle 因为在 fiddle 中显示太小所以表现不同。）

Answer 1

我猜是因为屏幕尺寸。在我的电脑上测试，当浏览器全屏时，所有的都保持在最前面。当我将浏览器大小更改为半屏时，蓝色部分出现。尝试使用宽度百分比。

Answer 2

它很可能与最后一个非蓝色框换行，然后蓝色框从同一层开始。如果你想堆叠盒子，那么你将需要使用一些额外的 div。

左浮动元素不向上

Left floated element doesn't go upward

html

css

css-position

css-float