浮动是为图文环绕设计的排版工具，会导致父容器高度塌陷；定位是为精确控位设计的坐标系统，完全脱离文档流；二者解决不同问题，混用易致布局错乱。
定位和浮动不是“选哪个更好”的关系，而是解决完全不同的问题：浮动是为图文环绕而生的排版工具，定位是为精确控位而设的坐标系统。混用或互换，八成会出布局错乱。
float 会让文字绕着它走，但父容器会塌陷
给图片加 float: left，正文段落会自动贴边、绕排——这是它唯一被设计出来的本职工作。但副作用立刻出现：parent div 高度变成 0，背景色/边框消失，后续内容可能叠上来。
- 必须手动清除浮动，常见做法是给父容器加
overflow: hidden或display: flow-root（推荐） -
float只对display计算值为block或table的元素生效，inline元素设了也无效 - IE6/7 的双倍
marginbug 在老项目里仍可能冒头，别忽略兼容性检查
position: absolute 完全不占位，top/left 依赖最近的 relative 父级
绝对定位元素就像被“剪下来”贴到页面上，其他元素当它不存在。但它不会自动绕行，也不会撑开父高——height: 100% 在没设显式高度的父级里直接失效。
- 如果父容器没设
position: relative，top: 20px会相对于整个视口定位，极易“飘走” -
z-index只在创建了新层叠上下文的祖先内有效；单纯 float 不触发层叠上下文 - 屏幕阅读器仍能读取它，但视觉上已脱离流，无障碍需额外加
aria-hidden或逻辑处理
relative 和 float 表面都“移动”，但原位置是否保留完全不同
position: relative 是唯一不脱离文档流的定位方式：它视觉偏移了，但原始占位还在，后面元素不会顶上来；float 移动后，块级兄弟会直接占据它原来的位置，只有文字才绕行。
-
margin: 0 auto在position: absolute或float元素上都失效，居中得靠left: 50%; transform: translateX(-50%)或 flex - 浮动元素的
vertical-align无效，但relative元素可以配合它微调对齐 - 不要给父级也设
position: absolute——子绝父绝会导致父容器塌陷，后续内容上移，典型错误搭配
真正容易被忽略的点是：现代布局中，float 和 absolute 都不该承担主结构任务。Flexbox 和 Grid 才是负责容器级排列的正解；float 仅保留在图文环绕等极少数语义场景，absolute 则专用于悬浮、角标、弹窗等“脱离上下文”的局部控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
