浮动元素的排列顺序由html结构决定，css的float属性无法改变其先后顺序；清除浮动必须作用于后续兄弟元素而非自身；display: flow-root是最优现代解决方案。
浮动元素的排列顺序由HTML结构决定，不是CSS控制的
浮动元素（float: left 或 float: right）的视觉排列顺序，完全取决于它们在HTML中出现的先后顺序，CSS无法通过 float 属性本身调整“谁在前、谁在后”。比如两个 div 并列写在HTML里，即使给后者加了 float: left，它也不会跑到前者左边去——它只会尽可能往左贴，但前提是前面没被其他浮动块占位。
常见误解是以为加 float 就能像 Flex 或 Grid 那样重排，实际不是。浮动本质是“文字环绕式”布局机制，它的定位逻辑基于文档流起点和已占据空间。
- 如果父容器宽度不够，后浮动的元素会自动换行到下一行最左/右位置
-
float: right的元素总是从行尾开始向左“挤”，所以多个float: right元素会从右往左依次排列 - 混合使用
float: left和float: right时，左右两组互不干扰，但可能造成中间内容塌陷或错位
清除浮动必须作用于后续兄弟元素，而非浮动元素自身
clear: both（或 left/right）生效的前提是：该元素是浮动元素的**后续普通流兄弟元素**，且自身未浮动。把它加在浮动元素自己身上毫无意义——浮动元素已经脱离文档流，clear 对它不起作用。
典型错误写法：<div class="item" style="float: left; clear: both;"></div> —— 这里的 clear 完全被忽略。
- 正确做法是在所有浮动子元素之后，插入一个空
div并设clear: both - 更现代的替代方案是给父容器设置
overflow: hidden或display: flow-root，触发BFC来包裹浮动子元素 - 用伪元素清除（
::after+clear: both）也依赖于父容器，且需确保伪元素在文档流中生成
display: flow-root 是目前最干净的清除浮动方式
display: flow-root 是专为解决浮动塌陷而设计的值，它创建一个新的块级格式化上下文（BFC），让父容器能正确包含其内部浮动子元素，同时不影响子元素的布局行为。
相比 overflow: hidden，它不会意外裁剪溢出内容；相比伪元素清除，它无需额外DOM或CSS hack。
- 支持所有现代浏览器（Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+）
- 写法极简：
.container { display: flow-root; } - 不改变父容器的盒模型表现，也不影响 margin 合并规则（这点比
overflow: hidden更可靠） - 若需兼容 IE，仍得回退到
zoom: 1（IE专有）或伪元素方案
浮动塌陷的本质是父容器高度计算丢失
当子元素全部浮动后，它们脱离文档流，父容器高度会坍缩为 0（除非有非空文本节点或设置了固定高度）。这不是“bug”，而是浮动机制的自然结果——浏览器按正常流计算高度，而浮动元素不在其中。
很多开发者试图用 height: auto 或 min-height 强制撑开，但这只是掩盖问题，不能真正包含浮动子元素。
- 验证是否塌陷：给父容器加
border: 1px solid red，看边框是否包裹住子元素 - 检查 computed height 是否为 0（在 DevTools 中查看）
- 注意：某些 CSS 框架（如 Bootstrap 4 的
.clearfix）内部仍是靠伪元素 +clear实现，原理一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
