浮动布局已不推荐用于现代页面布局，但理解其原理对兼容旧项目仍有价值；核心是利用float的文本环绕特性实现左右自适应+固定宽度组合，需注意HTML顺序、overflow:hidden触发BFC及父容器清除浮动。
浮动布局在现代 CSS 中已不推荐用于整体页面布局（Flexbox 和 Grid 更优），但理解其原理对兼容旧项目或特殊场景仍有价值。左右自适应 + 固定宽度组合，核心在于：一侧设固定宽（如侧边栏），另一侧利用 float 的“包裹”和“文本环绕”特性实现自动填满剩余空间。
固定左栏 + 自适应右栏（经典双栏）
左侧导航栏设固定宽度（如 200px），右侧主内容区随窗口缩放自动调整。关键点是：固定栏先写、加 float: left；自适应栏不设宽、也加 float: left 或用 overflow: hidden 触发 BFC 阻止文字环绕。
- HTML 结构建议：固定栏写在前面，内容栏写在后面
- CSS 中固定栏设置
width: 200px; float: left; - 内容栏设置
overflow: hidden;（最简可靠方案），或float: left; width: auto;（需注意父容器清除浮动） - 父容器务必清除浮动，例如加
::after伪元素或overflow: auto;
固定右栏 + 自适应左栏（反向双栏）
右侧为工具栏或广告位，宽度固定；左侧为主内容，需撑满剩余区域。做法类似，但顺序和浮动方向要对应：
- HTML 中把固定右栏放在 后面（不影响 DOM 语义优先级）
- 固定栏加
float: right; width: 180px; - 左侧内容栏不设宽，加
overflow: hidden;即可自动避开右栏，占据左边全部可用空间 - 同样需确保父容器正确清除浮动影响
三栏布局：两边固定 + 中间自适应
常见于传统 CMS 或后台框架。左右各一固定栏（如 200px），中间流体内容。浮动实现的关键是：左右栏分别 float: left 和 float: right，中间栏夹在中间并用 overflow: hidden。
立即学习“前端免费学习笔记（深入）”；
- 左栏：
float: left; width: 200px; - 右栏：
float: right; width: 200px; - 中间栏：
overflow: hidden;（无需 width，自动计算左右间隙） - HTML 顺序建议：左栏 → 中间栏 → 右栏（保证语义和可访问性）
注意事项与替代建议
浮动本质是文本环绕机制，用于布局属于“hack”。实际开发中需注意：
- 浮动元素会脱离文档流，父容器高度塌陷——必须清除浮动（
clear: both或 BFC） - IE6/7 对
overflow: hidden触发 BFC 支持不一致，旧项目需测试 - 响应式下浮动难以灵活切换方向，建议用
display: flex替代：固定栏设flex: 0 0 200px，自适应栏设flex: 1 - 现代项目优先使用 Grid：如
grid-template-columns: 200px 1fr 200px，语义清晰、控制力强
不复杂但容易忽略的是：浮动布局的健壮性高度依赖 HTML 顺序和清除浮动的完整性。若只是快速适配老代码，浮动仍可用；新项目直接上 Flex 或 Grid，省心且更可控。
