Div定位与Float问题：蓝色方块显示异常原因及位置调整方案

嘿，这个问题其实是CSS浮动和文档流的经典坑，我来给你拆解清楚～

为什么蓝色方块会显示在红色方块上方？ #

核心原因是浮动元素脱离了正常文档流：

• 红色和绿色方块设置了float: left和float: right，这会让它们跳出正常的文档布局流——简单说就是它们不再占据文档流中的垂直空间，页面会把它们当成“漂浮”在正常内容之上的元素。
• 蓝色方块没有设置浮动，属于正常文档流元素，它的布局会忽略浮动元素的垂直占位，直接从页面顶部开始按照margin: 50px的规则渲染。结果就是蓝色方块和红色方块的垂直起始位置一致，视觉上就会出现蓝色方块“压在”红色方块上方（或者重叠区域蓝色更显眼）的情况，哪怕它在代码里写在红色方块之后。

如何把蓝色方块移至红色方块下方，同时保留红绿位置？ #

我们需要让蓝色方块清除浮动，这样它就不会再向上填补浮动元素的位置，而是乖乖排在所有浮动元素的下方。这里有几种实用方案：

方案1：直接给蓝色方块添加clear属性 #

这是最直接的方法，只需要修改蓝色方块的CSS：

#blue { background-color: blue; clear: left; }

• clear: left表示该元素的左侧不允许有浮动元素，蓝色方块会自动下移到红色浮动元素的下方。
• 如果担心右侧绿色浮动元素的影响，也可以用clear: both（左右两侧都不允许有浮动元素），效果完全一致。

方案2：用伪元素清除浮动（通用型方案） #

如果后续页面会有更多浮动元素，推荐这种方法，它能确保父容器包含所有浮动元素，避免布局混乱：
首先给三个方块套一个容器：

<div class="square-wrapper">
  <div class="square" id="red"></div>
  <div class="square" id="green"></div>
  <div class="square" id="blue"></div>
</div>

然后添加清除浮动的CSS：

.square-wrapper::after {
  content: "";
  display: block;
  clear: both;
}

这种方法不需要修改蓝色方块的样式，后续再添加浮动元素也能自动适配，是前端开发中处理浮动的常用技巧。

方案3：使用display: flow-root（现代浏览器友好） #

这是CSS新推出的属性，能创建一个新的块级格式化上下文，自动清除内部浮动的影响：

#blue { background-color: blue; display: flow-root; }

这个方法代码简洁，兼容性也不错（支持Chrome、Firefox、Edge等现代浏览器），适合不需要兼容旧版IE的场景。

效果验证 #

不管用哪种方案，修改后红色方块依然左浮、绿色方块右浮，蓝色方块会稳稳地排在它们的下方，完全符合你的需求～

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