浮动布局虽被Flex/Grid取代，但在老项目、IE8+兼容及布局演进理解中仍需掌握；核心是清除浮动、脱离文档流与高度塌陷；两栏用float+margin，三栏有圣杯与双飞翼；推荐clearfix清除浮动；新项目应优先使用Flex或Grid。
浮动布局虽已逐渐被 Flex 和 Grid 取代，但在老项目维护、兼容性要求高（如 IE8+）或理解 CSS 布局演进逻辑时，仍需掌握其核心实现思路。关键不在“怎么写”，而在“为什么这样写”——尤其是清除浮动、文档流脱离、高度塌陷这些易错点。
两栏布局：左定宽 + 右自适应
典型场景：左侧导航栏 200px，右侧主内容区占满剩余宽度。
核心逻辑：左侧元素 float: left 脱离文档流，右侧内容通过 margin-left 预留空间，避免文字环绕。
- 左侧盒子设置 width: 200px; float: left;
- 右侧盒子不浮动，但加 margin-left: 200px;，确保从左侧之后开始排列
- 父容器需 清除浮动（如 after 伪元素），否则高度塌陷，背景/边框不显示
三栏布局：两侧定宽 + 中间自适应
经典圣杯布局（Holy Grail）和双飞翼布局（Double Flying Wings）都基于浮动，区别在于 HTML 结构与负 margin 的运用方式。
立即学习“前端免费学习笔记（深入）”；
圣杯布局特点：中间内容 DOM 在前，利于 SEO 和首屏渲染；靠 padding + 负 margin 挤出侧栏位置。
- 父容器设 padding: 0 200px;（为左右栏预留空间）
- 左栏 float: left; width: 200px; margin-left: -100%;，拉回最左
- 右栏 float: right; width: 200px; margin-right: -200px;，拉至最右
- 中间栏不设宽度，靠父容器 padding 自然撑开
清除浮动的三种可靠方式
浮动导致父容器高度为 0 是最常见问题，必须显式处理。
- clearfix 类（推荐）：在父容器上添加 class="clearfix"，配合 :after 伪元素触发 BFC
- overflow: hidden;（简单粗暴）：适用于父容器无溢出需求的场景
-
额外空标签：
<div style="clear:both"></div>—— 不推荐，污染结构
浮动布局的局限与过渡建议
浮动本质是为图文环绕设计的，用作页面整体布局属于“hack”。它难以处理垂直居中、等高列、响应式重排等问题。
实际开发中建议：
