清除默认样式需重置 margin/padding 并设 box-sizing: border-box；顶层用 flex 垂直分区并设 min-height: 100vh；横向分栏单独建 flex 容器；图文混排局部微调可用 float，但整体布局优先 flex；注意 white-space、overflow 及 align-items 对齐细节。
清除默认样式前，margin 和 padding 会偷偷撑开布局
浏览器对 body、h1、p 等元素自带默认间距，不重置就直接写简历布局，顶部和段落之间总“多出一截”，看着像没对齐。这不是你 flex 写错了，是浏览器在帮你“好心添乱”。
实操建议：
- 用
* { margin: 0; padding: 0; box-sizing: border-box; }开头——box-sizing: border-box尤其关键，否则后续设width: 300px还要手动减padding - 别只清
body，ul、ol默认有左缩进，简历里做技能列表时会错位 - 字体大小别依赖浏览器默认（比如 Chrome 的
16px），显式写body { font-size: 14px; line-height: 1.5; }，避免换设备后行高崩塌
用 display: flex 分区比浮动更稳，但别把整个简历塞进一个 flex 容器
浮动（float）现在纯属历史兼容需求；简历这种结构清晰的单页，flex 能对齐、能等高、能响应式收缩，但滥用会导致子项尺寸失控。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 把
header、main、footer全包进一个display: flex; flex-direction: column;——结果main高度塌陷，内容溢出 - 给
section设flex: 1却忘了父容器没设高度，它压根不生效
实操建议：
- 顶层用
flex做垂直分区：body { display: flex; flex-direction: column; min-height: 100vh; }，再让main自适应：main { flex: 1; } - 横向分栏（如“左侧个人信息 + 右侧经历”）单独建
flex容器，设flex-wrap: wrap应对小屏 - 避免嵌套超过两层
flex，第三层开始容易因min-width或white-space触发意外换行
float 没完全淘汰，但只适合局部微调，比如头像右上角小图
现在还用 float，不是因为“它更好”，而是某些场景下它比 position: absolute 更轻量、不影响文档流——比如在一段简介文字里插个圆形头像，让它浮在右上角，文字自动绕排。
使用场景与坑：
- 仅限图文混排类局部调整，别用它搭整体骨架
- 浮动元素后面必须跟
clear: both的空标签或伪元素，否则后续区块会上移（经典“父容器高度塌陷”） -
float: right在 RTL 语言环境（如阿拉伯语简历）下行为反直觉，若需国际化，优先用text-align: right+inline-block
Flex 分区后文字换行异常？先查 white-space 和 overflow
简历里常出现“技能标签挤成一团”“公司名被截断显示省略号”——这往往不是 flex 容器问题，而是文本节点自身的渲染策略被忽略。
参数差异与影响：
-
white-space: nowrap会让整行不换行，即使容器变窄，导致水平滚动或溢出 -
overflow: hidden配合text-overflow: ellipsis要求元素是块级且有固定宽度，flex 子项若设了flex: 0 1 auto就可能失效 - 中文简历里“·”分隔符如果用
white-space: normal下不会断行，换成（零宽空格）更可控
实操建议：给技能标签加 flex-wrap: wrap，每个标签用 flex-shrink: 0 防压缩，再配 margin-right: 4px 控制间距——比硬塞 white-space: nowrap 更健壮。
复杂点在于：flex 的 align-items 和文本基线对齐是两套逻辑，右侧经历栏里“时间”和“职位”看起来没对齐，大概率是 align-items: flex-start 没显式声明，或者字体 line-height 不一致。这些细节不打眼，但扫一眼就觉着“不够专业”。
