使用float实现两列布局需设置左右浮动及宽度，通过overflow:hidden清除浮动，避免父容器塌陷，适用于旧项目维护。
使用CSS浮动（float）实现两列布局是一种经典方法，通过将元素设置为 float: left 和 float: right，可以让两个块级元素并排显示，常用于侧边栏+主内容区域的页面结构。
基本原理：浮动让元素脱离文档流并靠边排列
当一个元素设置 float: left 时，它会尽可能向左移动，而 float: right 则向右移动。其余内容会围绕它显示。在两列布局中，我们通常让左侧列左浮动，右侧列右浮动，使它们在同一行上并列。
关键点：
- 两个列都必须设置宽度，否则可能无法正确并排
- 父容器最好清除浮动，避免影响后续布局
- 浮动元素仍属于普通文档流的一部分，但脱离了标准块级元素的独占行特性
HTML结构示例
左侧内容右侧内容
CSS样式实现
.container {
width: 100%;
overflow: hidden; /* 清除浮动，防止塌陷 */
}
.left-column {
float: left;
width: 70%;
background-color: #f0f0f0;
padding: 10px;
}
.right-column {
float: right;
width: 25%;
background-color: #d0d0d0;
padding: 10px;
}
说明：
立即学习“前端免费学习笔记（深入）”；
- 左侧占70%，右侧占25%，加起来小于100%是为了留出一点间距，避免因边框或padding导致换行
- 使用 overflow: hidden 在父容器上触发BFC，自动包含浮动子元素
- 也可以用额外的清除浮动元素（如 ）
注意事项与局限性
虽然浮动布局兼容性好，适合旧项目维护，但也有一些限制：
- 浮动元素脱离正常流，容易造成父容器高度塌陷，必须手动清除
- 响应式设计中调整困难，不如Flexbox或Grid灵活
- 多个浮动元素之间容易因宽度计算误差而换行
现代开发推荐使用 Flex 或 Grid 布局替代浮动，但在学习CSS发展过程或维护老项目时，掌握浮动实现两列仍是必要技能。
基本上就这些，掌握 float left 和 right 的配合使用，就能快速搭建简单两列结构。
