浮动元素本质部分脱离文档流，需通过父容器触发BFC（如display: flow-root）或clearfix伪元素等方式让其“表现如在流中”；clear: both须加在浮动元素后的块级兄弟元素上，而非浮动元素自身。
浮动元素无法真正“保持文档流位置”——float 的设计目的就是让它**部分脱离文档流**，所以问题本身存在前提误判。你需要的不是“让浮动元素留在文档流”，而是“让布局表现得像它还在文档流里”。关键在父容器如何响应，而非子元素自身。
为什么给浮动元素加 position: relative 无效
这是最常见的误解。给浮动元素设 position: relative 只会让它在脱离文档流后的位置上再偏移，但：它仍不参与父容器高度计算；后续块级元素依然会“钻到”它下方；文字环绕行为照旧。你看到的“位置没变”，只是视觉巧合，底层流已被破坏。
-
float和position: relative是正交属性，后者不取消前者的脱离行为 - 父容器高度仍为 0，inspect 中蓝色高亮区域不会包裹浮动子项
- 若同时设置
top/left，还可能引发渲染错位（尤其 Safari 旧版）
clear: both 加在哪才起作用
clear: both 不是贴给浮动元素看的，它是告诉“下一个兄弟块级元素：你别跟前面的浮动挤一起”。所以它必须加在浮动元素之后、且是块级的后续元素上。
- 错误：
.float-item { clear: both; }→ 浮动元素自己没有“前面的浮动”可避 - 正确：
.footer { clear: both; }，且 HTML 中<div class="footer">必须紧接在浮动容器之后 - 如果后续元素是
<span>或未设display: block，clear直接被忽略 - 父容器已触发 BFC（如用了
display: flex），再加clear可能干扰对齐逻辑
真正让父容器“感知”浮动子项的三种写法
目标只有一个：让父容器重新获得高度，并包裹住浮动子项。现代项目优先级从高到低：
立即学习“前端免费学习笔记（深入）”；
-
display: flow-root—— 最干净：一行生效，不裁剪溢出，不污染 DOM，Chrome 58+/Firefox 53+/Safari 15.4+ 全支持 -
.clearfix::after伪元素 —— 兼容 IE8+：content: ""+display: table+clear: both缺一不可；display: block在 IE6/7 下可能引发 margin 双倍 -
overflow: hidden—— 慎用：虽兼容性极好，但会裁剪position: absolute子元素、box-shadow、transform 位移后的内容
最容易被忽略的是嵌套场景：外层用了 flow-root，里面某个子模块又单独浮动了一组元素——这个子模块的父容器也得单独清理。浮动影响不会穿透层级，BFC 是逐层生效的。
