浮动三栏布局需清除浮动防塌陷，推荐伪元素法：.container::after{content:"";display:table;clear:both}，或末尾加；中间栏用margin预留左右空间而非浮动，配合box-sizing:border-box避免换行。
浮动三栏布局的 HTML 结构怎么写才不塌陷
浮动本身不会为父容器撑高，所以直接套 float: left 三列后，body 或外层 div 高度往往变成 0——内容全“掉下去”了。这不是代码写错了，是浮动的天然行为。
必须手动清除浮动影响。最稳妥的做法是在三列容器末尾加一个清除元素：
<div class="container"> <div class="left">左侧</div> <div class="main">主内容</div> <div class="right">右侧</div> <div style="clear: both"></div> </div>
或者用伪元素（更推荐）：
.container::after {
content: "";
display: table;
clear: both;
}
- 别用
overflow: hidden强撑高度——它会意外裁剪下拉菜单、弹窗等溢出内容 -
display: inline-block虽然也能并排，但元素间有空格导致宽度计算不准，不如浮动可控 - 三列宽度加起来必须 ≤ 100%，记得留出
border和padding的空间，否则最后一列会换行
左中右三列的 float 和 width 怎么配才不换行
经典组合是：左栏固定宽（如 200px），右栏固定宽（如 180px），中间自适应。关键在于中间栏不能设固定宽，要用 width: auto 并靠浮动“挤”出来。
典型写法：
.left { float: left; width: 200px; }
.right { float: right; width: 180px; }
.main { margin: 0 180px 0 200px; } /* 左右留白，不设 float */
- 中间栏不浮动，靠
margin预留左右空间，这样它才能自动填满剩余宽度 - 如果中间也
float: left，就必须给它设明确width，否则宽度为 0，内容堆成一竖条 - IE6/7 对
display: inline-block支持差，但对浮动兼容性好——如果还要支持老浏览器，浮动仍是更稳的选择
浮动三栏在响应式场景下为什么容易错位
媒体查询里只改 width 不够。浮动元素脱离文档流，缩小时若没重置 float，它们仍会试图并排，结果挤出容器或重叠。
小屏适配的关键动作是“解除浮动”：
@media (max-width: 768px) {
.left, .main, .right {
float: none;
width: 100%;
}
.main { margin: 0; } /* 清掉之前预留的左右 margin */
}
- 别只隐藏某列（比如
display: none），否则其他列的浮动关系还在，可能造成空白或偏移 - 移动端优先开发时，建议默认写单列流式布局，再用
@media给桌面端加浮动——比反过来调试更少踩坑 - 用
box-sizing: border-box统一所有列，避免padding加宽导致换行
现代替代方案要不要现在就换 Flex 或 Grid
如果项目只需支持 IE10+，display: flex 写三栏一行就完事，不用清浮动、不用算 margin，语义和维护性都更好：
.container {
display: flex;
}
.left { width: 200px; }
.right { width: 180px; }
.main { flex: 1; }
但如果你正在维护一个老系统，且要兼容 IE9 及以下，浮动仍是唯一可行方案——Flex 在 IE9 完全不支持，Grid 更晚。
真正容易被忽略的是：很多“浮动失效”问题其实源于祖先元素有 zoom: 1 或 hasLayout 触发异常，尤其在 IE6/7 中。这种细节现在少见，但一旦遇到，查 DOM 树比反复调 float 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
