html – CSS Float没有环绕

2023年3月18日 217次阅读

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/

我会从一个绝对定位的元素,而不是浮点数上预期上述.

最佳答案 那是因为带溢出的块：可见的跟随浮点的行为如下：

《html – CSS Float没有环绕》

要修复它,您可以设置overflow：hidden.然后它会表现得像这样：

《html – CSS Float没有环绕》

.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>
点赞