答案：使用CSS浮动实现三栏等宽布局需将三个.column元素设置float: left、width: 33.33%、box-sizing: border-box，并在.container上应用overflow: hidden以清除浮动，确保父容器包裹子元素，适用于老浏览器兼容场景。
使用CSS浮动实现三栏等宽布局，核心是让三个列块在同一行内并排显示，并且宽度相等。虽然现代开发更推荐使用Flexbox或Grid，但理解浮动方式仍有助于掌握CSS布局演进过程。
基本HTML结构
确保三个栏目包裹在一个容器中，结构清晰：
<div class="container"> <div class="column">栏目一</div> <div class="column">栏目二</div> <div class="column">栏目三</div> </div>
CSS浮动设置
通过设置每个栏目为左浮动，并指定相同宽度（如33.33%），实现等宽并列：
- 给每个 .column 设置 float: left
- 宽度设为 33.33%，保证三栏平均分配容器空间
- 添加 box-sizing: border-box，确保padding和border包含在宽度内
- 父容器 .container 建议清除浮动，防止高度塌陷
立即学习“前端免费学习笔记（深入）”；
.container {
width: 100%;
overflow: hidden; /* 清除浮动 */
}
<p>.column {
float: left;
width: 33.33%;
box-sizing: border-box;
text-align: center;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}</p>注意事项与清除浮动
浮动元素脱离文档流，父容器可能无法正确包裹子元素，需处理：
- 使用 overflow: hidden 在容器上触发BFC，自动包含浮动元素
- 或在最后添加一个清除浮动的元素：<div style="clear:both;"></div>
- 避免内容溢出或边距错乱，建议统一设置内外边距
