如何让HTML小块元素浮动且单个块展开后其余元素正确对齐？

嗨，这个问题我之前也碰到过，其实是浮动布局的一个典型特性导致的——浮动元素会尽可能在水平方向上填充空间，当某个元素高度超出其他元素时，后续的浮动元素会试图挤到它的下方空隙里，而不是自动换行到整行宽度。下面给你几个靠谱的解决办法：

方法1：用clear属性强制清除浮动 #

给那个高度扩展的div后面，加一个专门清除浮动的元素，强制后续元素换行到新的一行。

举个例子，你的HTML结构可以改成这样：

<div class="container">
  <div class="box">正常元素</div>
  <div class="box tall">高度100px的元素</div>
  <!-- 新增这个清除浮动的元素 -->
  <div class="clear-fix"></div>
  <div class="box">原本被挤的元素</div>
  <!-- 其他浮动div... -->
</div>

对应的CSS代码：

.box {
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px;
  background-color: #eee;
}
.tall {
  height: 100px;
}
.clear-fix {
  clear: both;
}

这样后续的浮动元素就会乖乖从新的一行开始排列，不会再卡到高元素的下方空隙里了。

方法2：用Flexbox/Grid替代浮动布局 #

现在更推荐用现代CSS布局方案来规避浮动的这类坑，比如Flexbox就很适合这种场景：

把容器的CSS改成这样就行：

.container {
  display: flex;
  flex-wrap: wrap; /* 允许元素换行 */
}
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background-color: #eee;
}
.tall {
  height: 100px;
}

Flexbox会自动处理换行逻辑，哪怕某个元素高度不一样，后续元素也会正常在新行排列，完全不会出现左边留空白的问题。如果需要更规整的网格布局，CSS Grid也是个很棒的选择。

方法3：统一所有元素的高度（适合需求允许的场景） #

如果你的页面允许所有div高度保持一致，那直接把所有.box的高度设置成最高元素的高度（比如100px），这样就从根源上避免了布局错位的问题。不过这个方法局限性比较大，只适合不需要差异化高度的场景。

内容的提问来源于stack exchange，提问作者Sunanda