浮动元素实现阶梯状右移需用尺寸递增的左浮动块挤占每行左侧空间，迫使文字自然绕排换行；关键在浮动块height显式递增、结构严格交替、避免BFC隔离及空白字符干扰。
浮动元素怎么让文字形成阶梯状右移
靠纯 float 实现阶梯排版，本质是用大小不一的左浮动块“挤占”每行左侧空间，迫使后续文字从不同起始位置换行。这不是 CSS Grid 或 Flex 的现代方案，但老项目里真有这种需求——比如旧版图文混排、手写新闻简报样式。
关键不是浮动本身，而是浮动块的尺寸递增 + 文字流自然折行。浏览器会按文档顺序把文字“绕过”已浮动的盒子，只要每个浮动块高度不同、宽度可控，就能制造错落感。
为什么不能只用 float: left 加固定宽高
常见错误是给所有浮动块设相同 width 和 height，结果文字全从同一垂直线开始换行，变成“锯齿”而非“阶梯”。真正起作用的是浮动块的 height 差异——它决定了下一行文字能“下沉”多深才碰到下一个浮动块。
-
height必须显式设置（不能auto），否则浮动块高度由内容撑开，不可控 - 浮动块需用
clear: none（默认即可），避免被前面块强制换行打断节奏 - 文字容器不能设
overflow: hidden或display: flow-root，否则会创建新的 BFC，切断文字绕排行为
float 阶梯排版的 HTML 结构陷阱
结构必须严格保持“浮动块 + 文字节点”交替出现，且浮动块必须在文字之前。一旦把文字包进 <p> 再插浮动块，或者浮动块放在文字后面，阶梯就断了。
立即学习“前端免费学习笔记（深入）”；
正确结构示例：
<div class="wrap"> <div class="step" style="float: left; width: 40px; height: 20px;"></div> 这行文字从第40px处开始 <div class="step" style="float: left; width: 60px; height: 40px;"></div> 这行文字从第60px处开始，且因前一块更高，它会往下沉一点再绕行 <div class="step" style="float: left; width: 80px; height: 60px;"></div> 这行文字从第80px处开始，继续下沉 </div>
注意：所有浮动块必须同级、无包裹、无间隙；文字不能用块级标签包裹（如 <p>），否则会触发新行，破坏连续绕排。
兼容性和替代方案提醒
IE8+ 支持这种绕排，但 Chrome/Firefox 对浮动后紧跟换行符或空格更敏感——实际中常因 HTML 换行缩进产生意外间隙，导致文字偏移错乱。最稳妥是删掉浮动块之间的所有空白字符（包括换行）。
如果目标环境支持现代 CSS，shape-outside 配合 clip-path 能做出更平滑的阶梯，但 IE 完全不支持；display: grid 则完全绕过浮动逻辑，需要重构布局思路。老项目修 bug 时，别强行套新方案——浮动阶梯虽土，但可控、可测、不依赖 JS。
真正难调的不是代码，是每个浮动块的 height 值要和字体行高、上下文 margin 精确咬合，差 1px 就可能让下一行文字卡在不该停的位置。
