float多栏错位主因是脱离文档流致父容器塌陷及宽度超100%；须清除浮动、用box-sizing:border-box、避免float与flex混用，ie8需兼容处理。
float:left 多栏布局为什么经常错位
因为 float 会脱离文档流，父容器高度塌陷，后续元素会上移；同时百分比宽度加边框/内边距后容易超 100%，触发换行。
- 必须给父容器加
overflow: hidden或伪元素清除浮动（如::after { content:""; display:table; clear:both; }） - 所有子项宽度之和（含
border、padding）不能超过 100%，建议用box-sizing: border-box - 避免在浮动元素上设
margin-bottom来控制垂直间距——它不会撑开父容器，改用padding-bottom更可靠
三栏等宽布局的稳妥写法
目标是三个并排块，各占 33.33%，且能响应式回退。关键不是“怎么写”，而是“怎么不崩”。
- 父容器统一设
box-sizing: border-box和清除浮动逻辑 - 子项用
width: 33.333%（不用 33.3%），避免小数累积误差 - 如果加了
1px solid边框，必须把宽度调成calc(33.333% - 2px)（左右边框共 2px） - 移动端直接用
display: none隐藏某栏，别试图用float重排——它不可控
.col {
float: left;
width: calc(33.333% - 2px);
box-sizing: border-box;
border: 1px solid #ccc;
}
float 布局和 flex 布局混用会怎样
会失效。一旦父容器设了 display: flex，子元素的 float 属性完全被忽略，包括清除浮动的伪元素也不起作用。
- 不要在 flex 容器里写
float——它不是“补充”，是冲突 - 老项目升级时，如果已有大量
float样式，切到 flex 要整块重写容器逻辑，不能只改父元素 display - 调试时看到浮动元素没生效，先查父级是否意外继承了
display: flex或grid
IE8 下 float 多栏的兼容性硬伤
IE8 支持 float，但不支持 calc()，也不支持 box-sizing: border-box（需 -ms-box-sizing 前缀，且部分场景仍不生效）。
- 宽度只能用固定百分比，边框/内边距得靠负 margin 补偿，例如：子项
width: 33.333%+margin-right: -1px - 清除浮动必须用 IE 友好的伪元素写法：
zoom: 1触发 hasLayout，再加clear: both - 如果项目还要求支持 IE8，建议放弃百分比边框，改用无边框+外层容器描边
实际做多栏并排时，最常出问题的不是“怎么写 float”，而是忘了父容器清浮、算了宽度却漏掉 box-sizing、或者在 flex 环境下徒劳地调 float 参数。这些地方一卡就是半天。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
