内容溢出是布局上下文失控的信号，主因包括浮动未清除、height:100vh锁死高度、flex子项缺乏收缩约束及table-layout未配width。应优先用display:flow-root或flex/grid替代float，min-height:100vh替代height:100vh，flex:1+min-width替代calc()，并确保table同时设width:100%与table-layout:fixed。
内容溢出不是“样式没写对”，而是布局上下文失控的信号——常见于浮动未清除、高度被硬编码、父容器未建立BFC或flex子项缺乏收缩约束。
float未清除导致后续区块被覆盖
当你用 float: left 布局选项卡或导航项，但没处理父容器塌陷，后续的 <p></p> 或 <section></section> 就会直接从顶部渲染，看似“被遮住”，实则是父容器高度为0。
- 别在父级末尾加
<div style="clear: both"></div>—— 过时且语义不清 - 给包裹容器设
display: flow-root（推荐）或overflow: hidden，安全触发BFC - 更彻底的解法：直接弃用
float，改用display: flex或grid，天然不塌陷
height: 100vh 导致页面无法滚动
设了 height: 100vh 却发现内容多出来却拉不动？因为该声明锁死高度，且默认 overflow: visible 不产生滚动条。
- 优先改用
min-height: 100vh，让内容自然延伸 - 若必须保持满屏占位，补上
overflow-y: auto（注意不是overflow: auto，避免意外触发横向滚动） - 检查
和是否也写了height: 100%或overflow: hidden—— 它们会截断滚动链
flex布局中子项撑破容器
用 flex: 0 0 33.333% 做三列，小屏下却溢出换行失败？问题常出在 gap 计算和 flex-shrink 被禁用。
- 别依赖
calc(33.333% - 1rem)扣 gap —— 浏览器不保证像素级精确，临界宽度易错位 - 改用
flex: 1; min-width: 280px;，让浏览器按可用空间自动分配列数 - 确保图片等内联元素有
max-width: 100%和flex-shrink: 1，否则它们会拒绝压缩
表格内容横向溢出不可见
表格在小屏上横向滑不动、文字挤成一团？table-layout: fixed 没配 width: 100% 就等于白设。
-
table必须同时有width: 100%和table-layout: fixed才生效 -
<col>比<th> 内联 <code>style="width: 30%"更可靠，它不依赖渲染顺序 - 外层加
overflow-x: auto是兜底方案，但要确认父容器没设white-space: nowrap或固定min-width
最易被忽略的一点：溢出问题往往不是单一样式导致，而是多个容器叠加约束失效——比如 flex 父级 + float 子项 + 100vh 祖级，三者同时存在时，调试要一层层剥离，而不是堆叠修复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
