答案：使用float实现三栏布局，左右固定宽度并分别左、右浮动，中间通过左右margin留白自适应；需注意浮动方向、margin与宽度匹配，并推荐用伪元素清除浮动以防止父容器塌陷。
三栏布局是网页设计中常见的布局方式，其中两侧固定宽度，中间自适应。使用 float 实现是一种经典且兼容性较好的方法。下面详细介绍如何用 float 完成这一布局。
基本结构与需求
目标：实现左右两栏固定宽度（例如 200px），中间栏自适应剩余空间。三栏高度一致，从上到下排列。
HTML 结构如下：
左侧固定
右侧固定
中间自适应
CSS 样式实现
核心思路：左右两栏使用 float 定位，中间栏通过 margin 留出空间实现自适应。
具体样式：
width: 200px;
height: 400px;
background: #f40;
float: left;
}
.right {
width: 200px;
height: 400px;
background: #04f;
float: right;
}
.main {
height: 400px;
background: #0f4;
margin-left: 200px;
margin-right: 200px;
}
关键点说明
float 布局的几个注意细节：
- 左侧元素使用 float: left，右侧使用 float: right，避免浮动冲突
- 中间 main 元素不浮动，通过左右 margin 为侧边栏腾出空间
- 必须确保侧边栏宽度与 margin 值一致，否则中间内容可能被遮挡或换行
- 父容器无需设置高度，但若需包含浮动子元素，建议清除浮动（如使用伪类 ::after）
清除浮动（可选但推荐）
为防止父容器塌陷，可以添加一个清除浮动的容器或使用伪元素：
.container::after {content: "";
display: block;
clear: both;
}
将 .container 作为三栏的父级包裹元素，确保布局稳定。
基本上就这些。float 实现三栏虽然略显“传统”，但在兼容老浏览器时依然实用，理解其原理有助于掌握 CSS 布局演进的基础逻辑。不复杂但容易忽略细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
