浮动不适合简历布局，因其导致高度塌陷、清除麻烦、响应式失效、语义混乱及无障碍缺陷；现代应优先用Flex实现侧栏+主内容结构，或用Grid精细控制头像与标题等模块位置。
浮动效果在现代简历中基本已被弃用，float 会导致布局不可控、清除麻烦、响应式失效，且语义混乱——别用 float 做简历布局。
为什么 float 不适合简历页面
简历需要清晰的阅读流、打印友好、适配屏幕缩放和打印预览。float 会脱离文档流，导致父容器高度塌陷，常见现象是页脚上移、内容重叠、打印时错位。CSS Grid 和 Flexbox 已完全取代它做多栏/侧边栏布局。
-
float: left后必须加clear: both或伪元素清除，否则后续区块错位 - 移动端无法可靠重排：
float在小屏下不会自动“堆叠”，需额外媒体查询强行重置 - 无障碍支持差：屏幕阅读器可能按源码顺序读取，但视觉上浮动元素已偏移，造成逻辑断裂
用 display: flex 实现“侧边栏+主内容”简历结构
这是最常用、最可控的方式，比如左侧放个人信息/技能，右侧放工作经历/项目。关键在于设置合理断点和折叠逻辑。
<div class="resume"> <aside class="sidebar">姓名、联系方式、技能标签...</aside> <main class="content">教育背景、工作经历...</main> </div>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.resume {
display: flex;
gap: 2rem;
}
.sidebar {
flex: 0 0 220px; /* 固定宽度，不伸缩 */
}
.content {
flex: 1; /* 剩余空间全占 */
}
@media (max-width: 768px) {
.resume {
flex-direction: column; /* 小屏变单列 */
}
.sidebar {
flex: none;
}
}用 display: grid 控制更精细的模块位置（如头像+标题并排）
当需要头像右对齐、标题左对齐、中间留白这类微调时，Grid 比 Flex 更直观。
<header class="header"> <h1>张三</h1> <img src="avatar.jpg" alt="头像"> </header>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.header {
display: grid;
grid-template-columns: 1fr max-content;
align-items: center;
gap: 1rem;
}
/* 小屏合并为一列 */
@media (max-width: 480px) {
.header {
grid-template-columns: 1fr;
text-align: center;
}
.header img {
justify-self: center;
}
}真正要注意的不是“怎么浮起来”，而是“怎么让信息层级自然、打印时不出截断、缩放时文字不溢出”。Flex/Grid 的 gap、minmax()、fit-content 这些才是实际要花时间调试的地方。
