为什么类为right的第三个div被向下挤压？如何实现三个div顶部对齐

偏移原因 #

你遇到的right div向下偏移，核心是两个问题：

1. 元素顺序和浮动渲染规则冲突：你当前的HTML排列顺序是左浮动left → 块级nav → 右浮动right。左浮动的left脱离文档流后，nav作为块级元素，即使设置了20%宽度，依然会占据整行的水平文档流空间，导致后面的右浮动right没有足够的水平空间放在当前行，只能掉到下一行。
2. vertical-align设置无效：这个属性只对inline、inline-block、table-cell类型的元素生效，你给.right同时设置了float:right和display:block，自然不会生效。

解决方案 #

提供两种可选方案：

方案1：基于原有浮动逻辑修改，改动最小 #

第一步：调整header内的元素顺序，把.right放到.nav前面

<header class="top-header group">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="nav">Nav</div>
</header>

第二步：给.nav加一行CSS避免和浮动元素重叠

.nav{
    display:block;
    width:20%;
    margin:auto;
    overflow: hidden; /* 新增这行即可 */
}

修改完成后就可以实现三个元素顶部对齐，left居左、nav居中、right居右的效果。

方案2：改用flex布局，逻辑更简单，不需要处理浮动 #

直接修改header的样式，原有浮动、清除浮动相关的代码都可以删掉：

/* 删掉原有的.left、.right的float、display设置，以及group的清除浮动代码，新增如下样式 */
.top-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 保证三个元素顶部对齐 */
}
.nav{
    width: 20%;
}

这种方案不用调整HTML结构，后续维护也更简单。

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