float多栏布局必须手动计算总宽度（含margin、padding、border）≤100%，否则末栏换行；需用box-sizing:border-box、留1–2px余量、父容器padding要扣除；clear:both或overflow:hidden防塌陷；IE8兼容需整数百分比或条件注释。
float 多栏布局必须手动算宽度，否则会换行
浮动元素的总宽度（含 margin、padding、border）超过父容器时，最后一栏必然掉到下一行。浏览器不会自动压缩或重排——它只按你写的宽度硬排。
- 用
box-sizing: border-box统一计算基准，避免 padding/border 溢出 - 所有栏宽加起来必须 ≤ 100%，建议留 1–2px 余量防四舍五入误差
- 如果父容器有 padding，子元素宽度要减去对应值，不能只写
33.33% - 常见错误：
width: 33.33%; margin-right: 10px—— 这样三栏实际超宽，第三栏必掉行
clear: both 必须加在浮动容器之后，否则父容器塌陷
浮动元素脱离文档流，父容器高度会变成 0。不处理就看不见背景、边框，内容还会叠在下面。
- 最简方案：在最后一栏后面加一个空
<div style="clear: both"></div> - 更稳妥做法：给父容器设
overflow: hidden或overflow: auto（注意可能截断绝对定位子元素） - 别用
float: left去“撑高”父容器——这只会让问题更难调试 - 错误现象示例：父容器
background-color完全不显示，inspect 元素发现高度为 0
IE8 及以下对百分比宽度计算有偏差，需用整数百分比
旧版 IE 在小数点后做四舍五入时和现代浏览器不一致，比如 33.33% 算出来可能是 34%，三栏直接超宽。
- 兼容方案：用
33%+34%+33%，或干脆用像素固定宽度（适合定宽版心） - 如果必须响应式，可用 IE 条件注释单独加载补丁样式表
- 注意：IE8 不支持
box-sizing: border-box，得靠width手动扣掉 padding 和 border - 验证方法：在 IE Tester 或真实 IE8 环境里检查是否每栏都横排，无换行
浮动栏顺序即 DOM 顺序，无法靠 CSS 调换阅读流
报纸排版常需要视觉上左中右，但语义顺序是上→下→右。浮动做不到“先放中间栏，再左右补位”，DOM 顺序决定渲染起点。
立即学习“前端免费学习笔记（深入）”；
- 想实现“中栏优先加载”，HTML 里就得把中栏写在最前面，再用
float: left和float: right分开推 - 左栏：
float: left；右栏：float: right；中栏：不 float 或float: left但宽度自适应 - 错误尝试：给三栏都设
float: left然后靠margin-left挪位置——容易错位，且响应式时难维护 - 移动端适配时，记得用媒体查询清除 float 并设
width: 100%回归单栏
