浮动元素的视觉顺序由 HTML 顺序和 float 方向共同决定，必须先调整 DOM 结构再设 float；clear 仅影响后续元素布局起点；现代布局应优先使用 flex/grid 的 order 或 grid-column 属性。
float 元素的显示顺序由 HTML 顺序和 float 方向共同决定
浮动元素不会脱离文档流的“位置感知”，但会脱离“空间占据”——这意味着它们的视觉顺序 ≠ DOM 顺序，但又严重依赖 DOM 顺序。单纯靠 float: right 把后写的元素塞到前面，行不通；必须配合 HTML 结构调整。
- 如果希望左→右依次排列三个块，就老老实实按
div-A、div-B、div-C的顺序写 HTML，并统一设float: left - 若想让
div-C显示在最左边（视觉上第一个），就得把它提前到 HTML 最前面，再配float: left -
float: right会让元素从容器右边界开始“贴边堆叠”，后浮动的元素会出现在更左边（不是更右边！），容易误以为能反序——实际是右对齐下的逆序堆叠，不可靠用于精确排序
清除浮动（clear）会影响后续元素的布局起点，间接改变视觉顺序
clear 不改变浮动元素自身位置，但会强制后续元素“避开所有已浮动区域”，从而把后续内容往下推。这在多行浮动布局中特别关键：不加 clear，下一行元素可能被上一行浮动元素“卡住”在奇怪位置。
- 常见错误：
div浮动后，紧跟着一个p文字直接换行显示在浮动块下方空白处——其实是p仍处于原高度，只是被浮动块遮住了部分文字 - 修复方式：在需要“另起一行”的元素上加
clear: both，或用伪元素::after清除父容器内的浮动（即 BFC 触发） - 注意：
clear: left只避开左侧浮动，clear: right只避开右侧浮动；多数场景用clear: both更安全
float + width 配合不当会导致换行错乱，视觉顺序崩塌
浮动元素默认宽度为内容宽，一旦总宽度超容器，就会自动折行。这时“顺序”就变成“第一行从左到右、第二行再从左到右”，而非连续横排。很多人以为加了 float 就能无限并排，其实不然。
- 典型现象：三列
float: left布局，在小屏幕下第三列掉到第二行最左边，看起来像“1、2、4、3”这种错乱顺序 - 根本原因：
box-sizing: content-box下，padding/border会撑大实际宽度，导致计算溢出 - 解法：统一设
box-sizing: border-box；显式设置width（如width: 33.333%）；留出合理间隙（避免 33.333% × 3 = 99.999% 还剩 0.001% 导致折行）
现代替代方案（Flex/Grid）为何更可控？
float 本意是文字环绕图片，强行用于页面布局属于 hack。它的顺序控制本质是“借位 + 避让”，逻辑隐晦、容错率低。而 flex 和 grid 的 order、grid-template-areas 等属性，才是面向布局顺序的一等公民。
立即学习 “ 前端免费学习笔记（深入）”；
-
display: flex下，order值直接定义视觉顺序，完全解耦 DOM 顺序 -
display: grid中，用grid-column或grid-area能把任意元素扔到任意格子，顺序彻底自由 - 兼容性提醒：IE10+ 支持
flex，IE11 支持部分grid；若需支持 IE9 及以下，float 仍是唯一选择，但务必接受其限制
浮动布局里调顺序，不是调 CSS 就能解决的事——HTML 写在哪，往往比 float 设成什么方向更重要。别指望靠 clear 或负 margin 补救结构缺陷，先理清 DOM 序列，再选 float 方向，最后用 width 和 box-sizing 卡准尺寸。否则越调越乱。
