如果浮动元素在其他浮动元素下，它应该如何垂直对齐？答案

【问题标题】：How should a floating element be aligned vertically if it's under other floating elements?如果浮动元素在其他浮动元素下，它应该如何垂直对齐？
【发布时间】：2021-12-24 09:06:10
【问题描述】：

有一个容器可以容纳四个左浮动的divs，每个width都设置为50%（连续两个）。此外，我为每个div 添加了一个top-margin 值，但第一个（通过这个类似猫头鹰的选择器* + *）。

由于第一个 div 自身内部的文本比第二个少，因此它们的高度可能会导致不同的值（第一个会更小）。在这种情况下，出乎我的意料，第三个div 将在第一个下方找到它的位置，只有它的top-margin 阻止它接触第一个。相反，我找到了这张照片：

显然，第三个div 达到了第二个垂直水平。有人可以详细说明这个规则吗？为什么第三个div 没有尽可能高地提升到它（第一个div）？

JSFiddle

【问题讨论】：

要获得您的布局，使用浮动不是一个好的解决方案......最好使用 flexbox 或网格
@Sfili_81 是的，我知道这个选项，但现在我只是想掌握浮动。
为什么要以这种方式在顶部添加边距body * + * ？
@Sfili_81 这是一种在垂直对齐的元素之间实现垂直间隙的便捷方法（我们不希望它应用于第一个元素，至于body 本身）
@Sfili_81 好的，在这种情况下，top-margin 应该应用于第一个div（我制作这个示例是为了将这些 div 变成一个- div-in-a-row 稍后）。尽管如此，我的问题仍然存在。

标签： html css css-float

【解决方案1】：

float:left 布局的逻辑是 - 如果有空间，则放在前面的左浮动的右侧，如果没有，则放在它们下方。不 - 填写第一个足够大的空格。

究竟为什么不明显。我怀疑它既足以满足目标用例，又足够简单，可以在指定时实现。

【讨论】：

我起初认出你的答案是因为浮动元素不能放置在高于前面元素底部的位置，所以这就是第三个 div 有这个位置的原因我的例子。但是，如果第一个div 包含的内容多于第二个，则第三个find its position higher 可能会比first 的底线多。直截了当：如果前面的浮动右侧没有位置，请填写它们下方的第一个位置，但不要将其提升到高于立即前任的底线.
你能说我终于猜对了吗？
@Mergasov - 有点，但不仅仅是直接的前身。可能有几个前辈必须移动到下面才能有空间容纳它。此拟合过程要求其边距顶部永远不会高于其右侧任何左侧浮动元素的边距底部。如果您想准确理解它，a float's precise rules 在 CSS 2 规范中给出。