浮动元素的渲染顺序取决于html文档流中的出现顺序，它仍受文档流约束，并非绝对定位；float:left元素向左上靠是相对于当前文档流位置，而非容器左上角。
浮动元素的渲染顺序完全取决于 HTML 文档流中的出现顺序
浮动不是“绝对定位”，它仍受文档流约束。float: left 的元素会尽可能往左上角靠，但前提是前面没有其他浮动块挡路；它的“上”和“左”是相对当前文档流位置而言的，不是整个容器的左上角。
常见错误现象：div#sidebar 写在 div#main 后面，却想让它显示在左侧——结果它被挤到 div#main 下方，因为浏览器先渲染了 div#main，它已占据顶部行内空间，div#sidebar 只能往下找空位。
- 浮动元素必须写在 HTML 中需要它“提前占位”的位置，比如侧边栏要左浮，就得放在主内容之前
- 如果结构已固定（如 CMS 模板），不能改 HTML 顺序，就别用
float，改用flex或grid -
clear只能控制“本元素是否绕过前面的浮动”，不能把后面的浮动拉到前面去
浮动塌陷时父容器高度丢失，不是顺序问题而是清除机制缺失
很多人以为“子元素浮动后父容器没高度”是因为顺序错，其实根本原因是：浮动元素脱离普通文档流，父容器无法感知其尺寸。这和谁先谁后无关，只和是否触发 BFC 或是否清除浮动有关。
使用场景：父容器只有几个 float: left 的子项，但 height 显示为 0，背景色/边框消失。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥的修复是给父容器加
overflow: hidden（或auto），触发 BFC —— 简单、兼容性好、不依赖顺序 - 用
::after伪元素清除（content: ""+clear: both）也有效，但需确保父容器不是inline元素 - 别试图靠调整子元素顺序来“骗出高度”，无效；
float不改变父容器计算高度的逻辑
左右浮动混排时，顺序决定“谁先抢位”，但换行行为由剩余空间决定
多个 float: left 和 float: right 在同一父容器中，它们的 HTML 顺序决定了谁先尝试占据可用空间。但最终是否换行、如何折行，取决于容器宽度和各元素宽度之和。
常见错误现象：两个 float: left 元素本该并排，却垂直堆叠——不是顺序错了，而是容器太窄或元素设置了 width: 100%。
-
float: left元素从左往右依次尝试“贴左”，float: right从右往左依次尝试“贴右”，互不干扰，但共享同一行高 - 如果第一个
float: left宽度占满，后面所有浮动都会被挤到下一行，哪怕它们 HTML 顺序靠前 - 避免混用
left和right布局，响应式下极易错乱；现代布局直接用display: flex控制对齐更可靠
IE6/7 中浮动顺序 bug：双倍 margin、3px bug 都与顺序无关，而是渲染引擎缺陷
老版本 IE 的浮动相关 bug（如 margin-left: 10px 渲染成 20px）不是因为 HTML 顺序写反了，而是其盒模型解析和浮动计算逻辑有硬伤。这些 bug 在标准模式下也存在，和结构顺序无因果关系。
性能 / 兼容性影响：为兼容 IE6 强行调换 HTML 顺序，反而会让语义混乱、可访问性下降，且不能真正修复双倍 margin。
- IE6 双倍 margin 仅出现在
float元素的margin方向与浮动方向相同时（如float: left+margin-left） - 修复方式是加
display: inline，不是改 HTML 顺序 - 现在基本无需支持 IE6/7，强行适配这类 bug 已无实际意义，优先用
flex替代
浮动布局真正的复杂点不在“怎么写顺序”，而在于它把布局逻辑和文档语义耦合得太紧——顺序一动，视觉和可访问性可能全崩。现在连 float 用于文字环绕都越来越少，更别说做整页布局了。
