加了position: absolute的子元素会脱离文档流，不再作为flex项目参与布局计算，导致justify-content、align-items等失效，且定位基准变为最近定位祖先而非flex容器。
flex 子元素本身不会脱离文档流——问题出在你给它加了 position: absolute、float 或其他脱离流的声明。 这些属性会让元素退出 flex 布局上下文，导致父容器“看不见”它，计算错位、高度塌陷、居中失效全由此起。
为什么加了 position: absolute 的子元素在 flex 容器里“消失”或飞到左上角
因为 position: absolute 会强制元素脱离文档流，它不再作为 flex item 参与任何 flex 计算（justify-content、align-items、flex-grow 全部失效）。更关键的是：flex 容器默认不是定位上下文，所以该元素的定位基准会一路向上回溯，最终锚定到 body 或最近一个带 position: relative/absolute/fixed 的祖先上。
- 用开发者工具选中该元素，在 “Computed” 面板看
containing block字段，如果不是你写的父容器，就确认了这个问题 - 解决方法很简单：给 flex 容器显式加上
position: relative - 但注意：即使加了
position: relative，该元素仍不占 flex 布局空间，也不响应align-items——这是设计行为，不是 bug
float 在 display: flex 容器里为什么完全没反应
浏览器会静默忽略 float 声明。Flex 规范明确要求：在 flex 容器中，float 和 clear 对子元素布局无影响（除极少数 inline-level 场景外，不可靠且无实际价值）。
- DevTools 的 “Computed” 样式里，
float会被标记为not applicable - 如果你看到子元素“好像被 float 影响了”，大概率是它同时触发了其他副作用（比如
display: inline-block回退、或外层还有浮动干扰） - 想实现左右对齐？用
justify-content: space-between或margin-left: auto，别碰float
父容器高度塌陷 + 文本点击错位，根本原因是什么
当 flex 容器内混入脱离流的子元素（如 position: absolute 或未清除的 float），容器高度只按“还留在流内的内容”撑开。一旦所有子项都脱离了，父容器高度就塌成 0 —— 背景、边框、后续兄弟元素全部错位，点击区域和视觉位置脱节。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否设了
height或max-height，这会直接裁剪脱离流元素的视觉呈现 - 如果用了伪元素 clearfix（
.clearfix::after），但在 flex 容器里它默认不参与主轴排列，需额外加flex: 0 0 100%，否则无效 - 最干净解法是：不用脱离流，把布局逻辑全交给 flex —— 比如用
margin-left: auto替代float: right，用align-self: flex-end替代position: absolute; bottom: 0
真正容易被忽略的点是：**脱离文档流不是“多加一行样式”的小事，而是整个布局上下文的切换**。一旦某个子元素脱离，它就从 flex 的世界跳到了 position / float 的世界，两个世界的规则互不兼容，调试时必须分清“它现在属于哪个流”。
