根本原因是文档流顺序与浮动脱离共同作用：float:right元素前若有非浮动元素占据整行，其将无空间可浮而换行；解决需HTML中前置该元素或左右均浮动并防父容器塌陷。
为什么 float:right 元素总被挤到下一行？
根本原因不是“右浮动出错”，而是文档流顺序 + 浮动脱离共同作用的结果。当一个非浮动元素（比如普通文本或 <span></span>）出现在 float:right 元素之前，浏览器会先渲染它，占据整行宽度；此时 float:right 已无水平空间可“靠右”，只能下移换行。
这不是 IE 独有现象——现代浏览器同样如此，只是某些场景下因默认内边距、字体渲染差异显得不明显。
- 浮动元素必须在 HTML 中**物理位置靠前**，才能和后续内容“共享同一行”
-
float:right不改变元素在 DOM 中的顺序，只改变渲染位置 - 若父容器宽度窄、或前面有宽内容（如长文本、
img未设max-width），更容易触发换行
怎么让左右内容真正在同一行显示？
关键不是“怎么右浮动”，而是“怎么组织流式结构”。两种可靠做法：
- 把
float:right的元素写在 HTML 中**最前面**：<div class="header"> <span class="date" style="float:right;">2026-11-04</span> <h1>标题内容</h1> </div>
- 让左右都浮动：
float:left+float:right，但必须确保两者加起来不超过父容器宽度，且父容器不能塌陷（需clearfix或overflow:hidden）
注意：仅对右侧元素设 float:right，左侧保持默认，大概率失败；仅对左侧设 float:left 而右侧不设浮动，也大概率失败——浮动必须成对协调。
立即学习“前端免费学习笔记（深入）”；
响应式断点里 clear:both 为什么不起作用？
因为 clear:both 不是“取消浮动”，它只让**当前元素避开上方已浮动的兄弟**，而不会让自身退出浮动状态。小屏下你看到的错位，根源是 float:right 还在生效，父容器依然塌陷。
- 错误写法：
@media (max-width: 768px) { .date { clear: both; } }→.date还在飘，只是它下面的内容被推开了 - 正确做法：必须同时重置三个属性：
float: none（退出浮动）、width: 100%（避免收缩）、margin-right: 0（清除残留外边距） - 如果父容器有背景或边框，光改子元素没用，还得确保父容器高度恢复（比如加
display: flow-root）
现在还该用 float 做布局吗？
不该。浮动的设计初衷是图文环绕，不是网格或导航栏布局。你花一小时调 clear 和 margin，不如三行 CSS 切到 display: flex：
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
这天然解决换行、对齐、塌陷、响应式所有问题。旧项目维护中若必须保留浮动，请至少给父容器加 clearfix 伪元素——否则连背景色都不可靠，更别说对齐了。
