float 布局三栏后内容塌陷是因为浮动元素脱离文档流，父容器无法自动包裹子元素；解决关键是触发BFC，如overflow:hidden或display:flow-root。
为什么 float 布局三栏后内容塌陷？
因为浮动元素脱离文档流，父容器高度无法自动包裹子元素——这不是 bug，是 float 的设计行为。常见现象是：三栏排好了，但下面的页脚直接叠在栏目上，或者背景色只显示一丁点高。
解决核心不是“撑开”，而是让父容器重新感知浮动子元素的高度。最稳妥的做法是触发 BFC（块级格式化上下文），而不是盲目加 height 或空标签。
-
overflow: hidden或overflow: auto是最轻量、兼容性最好的方式（IE6+） - 避免用
clear: both单独加空<div>，它破坏语义，且在 flex/grid 时代容易混淆思路 - 注意：如果父容器本身有横向滚动需求，
overflow: hidden会截断内容，此时改用display: flow-root（现代浏览器）更安全
float 三栏中左右栏固定、中间自适应怎么写？
关键在中间栏不能设 width，而要用 margin 预留左右空间；左右栏必须先写在 HTML 中（顺序影响渲染逻辑），且需设定明确宽度和 float 方向。
典型错误是把中间栏放最前，或给中间栏也加 float——这样它会试图找“空位”浮动，而不是老老实实占剩余空间。
立即学习“前端免费学习笔记（深入）”；
- 左栏：
float: left; width: 200px; - 右栏：
float: right; width: 150px; - 中间栏：
margin: 0 150px 0 200px;（左右 margin 分别对应右栏宽、左栏宽） - 所有栏都需设定
box-sizing: border-box，否则 padding/border 会让宽度超限
清除浮动该用 clear 还是伪元素？
单独用 clear: both 必须作用于一个真实存在的、位于浮动元素之后的块级元素上；而伪元素方案（::after）本质是动态插入一个这样的元素，更干净。
但伪元素写法容易漏掉关键声明，导致无效：
- 必须设
content: ""，否则伪元素不生成 - 必须设
display: table或block，仅clear不起作用 - 推荐写法：
.clearfix::after { content: ""; display: table; clear: both; } - IE6/7 需额外加
*zoom: 1触发 hasLayout
现在还值得练 float 布局吗？
值，但目的不是为了上线用，而是理解“脱离文档流”“BFC”“渲染顺序”这些底层概念。实际项目中，float 几乎只用于文字环绕图片，三栏布局早被 flex 和 grid 取代。
练习时容易忽略的点：浮动对行内元素的影响、z-index 在浮动层中的表现、以及当父容器有 transform 时意外创建新层叠上下文的问题——这些在调试真实遗留系统时仍会撞见。
真正卡住人的，从来不是怎么写三栏，而是改别人写的浮动代码时，发现加了 clear 没用，结果发现外层有个 position: relative 把清除范围锁死了。
