Flex容器嵌在Grid单元格中横向溢出是因为Grid Item默认min-width: 0，而Flex容器继承min-width: auto导致撑破边界；解法是给Flex容器设min-width: 0或overflow: hidden。
Flex容器嵌在Grid单元格里为什么会横向溢出
因为 Grid Item 默认 min-width: 0，而 Flex 容器作为子项时继承了 min-width: auto（Flex 的默认最小尺寸），这个 auto 会“顶开” Grid 单元格的约束边界。
常见错误现象：Grid 列宽设为 1fr 或固定值，里面放一个 display: flex 的导航栏，长文本或图标组直接撑破右侧，滚动条意外出现。
- 解法一：给该 Flex 容器加
min-width: 0（最直接） - 解法二：加
overflow: hidden或overflow: clip（顺带防内容越界） - 避免写
width: 100%—— 在 Flex 里它常和flex-grow冲突，反而加剧计算混乱
position: absolute 元素在Flex/Grid容器中消失或错位
绝对定位元素会脱离文档流，不再参与 Flex 或 Grid 的布局计算，但它的定位参考点仍取决于最近的非 static 定位祖先 —— 这个祖先未必是你以为的那个父容器。
使用场景：想在卡片右上角加个 badge，把 position: absolute 直接写在 Flex item 上，结果 badge 飞到视口左上角。
立即学习“前端免费学习笔记（深入）”；
- 必须确保其父容器（即 Flex/Grid 容器）设置了
position: relative - Flex/Grid 容器本身不提供定位上下文，
position: relative是显式声明的必要条件 - 不要依赖
justify-content或place-items来“拉”绝对定位元素 —— 它们对脱离流的元素完全无效
float 在 Flex/Grid 容器中完全失效且干扰对齐
float 和 Flex/Grid 是互斥的布局模型。一旦父容器是 display: flex 或 display: grid，所有子元素的 float 声明都会被忽略，且可能意外重置 display 值（如把 inline-block 变成 block）。
常见错误现象：用 float: left 排列按钮组，放进 Flex 导航栏后全部堆在左侧，间距全丢；开发者工具里看到 float 属性被划掉，但没意识到这是规范行为。
- 立刻删掉所有
float和clear—— 它们在现代布局中没有存在意义 - 用
margin、gap或justify-content替代浮动对齐 - 如果真要兼容旧代码，把 float 元素包一层
div并设为display: block，再让它成为 Flex/Grid 子项
嵌套 Flex/Grid 时 align-items 不生效的根源
不是属性写错了，而是你忘了：只有当父容器是 Flex 或 Grid 时，align-items 才作用于其直接子项；它不会穿透多层容器自动影响孙子元素。
比如外层 Grid 设了 align-items: center，里面套一个 Flex 容器，再放一个文字 —— 文字不会居中，因为 align-items 没传下去。
- 每层需要居中的容器都得单独设
align-items（或place-items） - Flex 容器里用
align-self覆盖单个子项更灵活，但别指望它响应外层 Grid 的对齐设置 - 注意
align-content和align-items的区别：前者只对多行/多列起作用，单行 Flex 里设它没效果
混合布局真正的复杂点不在语法，而在渲染阶段的“上下文切换”——每个容器都在用自己的规则解释尺寸与对齐，而 CSS 没有自动桥接机制。你得亲手在每一层交界处补上那句 min-width: 0、position: relative 或 align-items，少一句就可能漏掉整个区域的渲染逻辑。
