float与position不能混用，因非static的position会使float完全失效；需按职责分离：文字环绕用float，精确定位用absolute并设父容器为relative，清除浮动推荐伪元素法而非overflow:hidden。
float 和 position 不能写在同一个元素上
只要 position 不是 static（比如用了 absolute、fixed 或 sticky），float 就会完全失效——这不是 bug，是 CSS 规范明确定义的行为。浏览器会直接忽略 float 声明。
常见错误写法：.item { float: left; position: absolute; }。这种写法既浪费样式，又容易让人误以为“浮动还在起作用”，结果元素突然脱离文档流、位置飘走、后续内容塌陷。
- 需要左对齐 + 精确定位 → 改用
position: absolute，并确保父容器有position: relative - 需要文字环绕图片 → 只用
float: left，别加任何position - 需要微调浮动项位置（比如图标上移 2px）→ 用
position: relative+top/bottom，它和float可共存
浮动容器必须设 position: relative 才能当定位上下文
想让子元素用 position: absolute 相对于该容器定位，光靠 float 不够——float 不创建新的定位上下文。必须显式给容器加 position: relative，哪怕它只是个空声明。
典型场景：浮动侧边栏里放一个右上角关闭按钮，或图文混排中图片右上角加角标。如果漏了这一步，absolute 元素会往上找，最终相对于 定位，位置完全错乱。
-
.sidebar { float: left; width: 200px; position: relative; }✅ -
.sidebar { float: left; width: 200px; }❌（子元素absolute会失准） - 注意：
position: relative本身不改变布局，只提供定位参考，可放心加
清除浮动后可能剪裁绝对定位元素
很多人用 overflow: hidden 清除浮动，但这个做法会让容器变成 BFC（块级格式化上下文），而 position: absolute 子元素的堆叠上下文会被限制在这个 BFC 内——即使写了 z-index，也可能被“框住”显示不全，或者被其他层遮挡。
更稳妥的清除方式是伪元素法：.nav::after { content: ""; display: table; clear: both; }，它不影响定位上下文和 z-index 层级。
- 避免在导航、卡片等含
absolute子元素的容器上直接用overflow: hidden - 如果非得用
overflow，记得同时加position: relative和足够高的z-index - 清除浮动的目的只是防止父容器高度塌陷，不是为了“视觉上看起来整齐”
老浏览器里 position: relative + float 要小心 hasLayout
IE8/9 中，仅设 position: relative 有时不足以让 absolute 子元素准确定位，尤其当父容器本身是浮动时。这时候需要触发 hasLayout，最兼容的方式是加 zoom: 1。
另外，IE8 不支持 right: 0 在 absolute 元素上的稳定计算，建议改用 left: auto; right: 0 配合 position: relative 父容器。
.nav-item { float: left; position: relative; zoom: 1; }- 下拉菜单宽度尽量用
min-width或固定值，避免width: auto在 IE 中崩坏 - 响应式断点切换布局时（比如从
float切到flex），原来基于relative的absolute定位会失效——这是预期行为，不是 bug，得单独处理媒体查询内的定位逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
