使用 float 属性可实现多列布局，通过设置 width 和 float:left 让元素并排；2. 浮动导致父容器塌陷，需用 clear:both、overflow:hidden 或 clearfix 伪类清除；3. 添加 margin 时需控制总宽度不超过 100%，推荐 box-sizing:border-box 并配合媒体查询实现响应式，在小屏幕切换为单列。尽管 float 布局兼容性好且实用，但现代开发更推荐 Flexbox 或 Grid，结构更清晰易维护。
实现多列浮动排列可以通过 float 属性结合宽度控制来完成，虽然现代布局更推荐使用 Flexbox 或 Grid，但在一些兼容性要求较高或简单场景中，浮动仍是可行方案。
1. 使用 float 实现基本多列布局
为多个元素设置相同的宽度，并让它们向左或向右浮动，即可并排显示。
例如：创建两列等宽布局
HTML:
<div class="column">左侧内容</div>
<div class="column">右侧内容</div>
CSS:
.column {
width: 50%;
float: left;
padding: 0;
margin: 0;
}
两个 div 将并排显示，各占一半宽度。
2. 处理浮动带来的布局问题
浮动元素会脱离文档流，父容器可能无法正确包裹子元素，导致后续内容错位。需清除浮动。
立即学习“前端免费学习笔记（深入）”；
常用清除方式：
- 在最后一项后添加清除元素：
<div style="clear:both;"></div> - 给父容器添加 overflow: hidden
- 使用伪类清除浮动：
.clearfix::after {
content: "";
display: table;
clear: both;
}
3. 添加间距与响应式调整
若想在列之间加入 margin，需注意总宽度不能超过 100%，否则会换行。
技巧：- 使用 box-sizing: border-box 包含 padding 和 border
- 设置 width 略小于理论值，如两列时用 49% + 2% 间距
- 配合媒体查询实现响应式断点
@media (max-width: 768px) {
.column { width: 100%; }
}
在小屏幕上自动堆叠成单列。
基本上就这些。float 布局虽老但实用，掌握它有助于理解 CSS 布局演变过程。实际开发中建议优先考虑 Flex 或 Grid，结构更清晰，维护更容易。
