CSS Float没有环绕

Question

HTML：

<div class="block pink float"></div>
<div class="block blue float"></div>
<div class="block green"></div>
<div class="block orange"></div>

CSS：

    .block {
        width: 200px;
        height: 200px;
    }
    .float { float: left; }
    .pink { background: #ee3e64; }
    .blue { background: #44accf; }
    .green { background: #b7d84b; }
    .orange { background: #E2A741; }

为什么橙色和绿色的盒子没有包裹而是出现在下面？根据我的理解，如果有足够的空间，元素将围绕浮子并在其下方移动，而不是在它后面。

我知道<div style="clear: both"></div>的clearfix解决方案，但不明白为什么会发生这种情况。

https://jsfiddle.net/ap5ugv8s/

我会从绝对定位的元素中预期上述内容，而不是浮动元素。

Answer 1

那是因为跟随浮点数的overflow: visible块的行为如下：

要解决此问题，您可以设置overflow: hidden。然后它会表现得像这样：

.block {
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.float { float: left; }
.pink { background: #ee3e64; }
.blue { background: #44accf; }
.green { background: #b7d84b; }
.orange { background: #E2A741; }

<div class="block pink float"></div>
<div class="block blue float"></div>
<div class="block green"></div>
<div class="block orange"></div>

Answer 2

让我们看看我是否能正确说出这一点。如您所知，浮动元素不在正常流程中。虽然浮动元素将相互排列，但对于其他块元素，它们就好像它们根本不存在一样。这意味着它们将被放置在浮动元素上，如果它们没有定位，例如position:relative;。您可以尝试将其添加到某些非浮动div中以进行播放，并查看添加定位如何更改内容。元素的定位是关键词。

我可能会在早上醒来时再编辑一下，但您可能需要阅读规范中的the W3C's explanation。

  

由于浮动不在流中，因此创建了未定位的块框   在浮动箱垂直流动之前和之后，好像浮子没有   存在。

Answer 3

如果是block则不是。发生的事情是浮动在块元素之上崩溃。并且块堆叠在彼此之上。我会用inline-block来代替浮点数。

.block {
    width: 200px;
    height: 200px;
    display: inline-block;
}

https://jsfiddle.net/ap5ugv8s/2/