CSS 3列,为什么第三列会取代其他2列?

您还需要“浮动”第三列。然后在后面添加一个清除块。

见 Block formatting contexts W3C:

在块格式上下文中,每个框的左外边缘接触包含块的左边缘(对于从右到左的格式,右边缘接触)。即使在存在浮动的情况下也是如此(尽管框的行框可能由于浮动而收缩),除非框建立新的块格式上下文(在这种情况下,框本身可能由于浮动而变得更窄)。

您可以通过强制创建新的阻塞格式上下文来避免这种情况:

<div style="background-color: #f0f; overflow: hidden">Three</div>

如果 overflow: hidden 不是您的选择(弹出窗口等),这里是另一种技术:

<div class="has-columns">
    <div class="column first">...</div>
    <div class="column second">...</div>
    <div class="column third">...</div>
</div>

.has-columns {
    padding-left: 400px; /* padding reserved for floats */
}

.column.first {
    width: 180px;
    margin-left: -400px;
    float: left;
}

.column.second {
    width: 180px;
    margin-left: -200px;
    float: left;
}

我不得不承认,浮点数的行为有时会令人困惑。

根据您希望在列1和列2消失时发生的情况,您有几个选项:

1)如果希望第3列扩展并填充所有剩余空间,只需添加 overflow: hidden; 到第三个分区的样式。它将流动到两个浮动分区旁边,正如您所期望的。

2)如果您希望第三列保持其大小和形状,无论第1列和第2列发生什么情况,都将其向右浮动,并设置宽度,例如 float: right; width: 200px; 它将不再受其他两个影响,而是停留在容器右边缘200px。