float 会让父容器高度塌陷，因为浮动元素脱离文档流，父容器无法自动包含其高度；清除浮动应触发bfc（如display: flow-root），而非依赖clear:both等副作用方案。
float 为什么会让父容器高度塌陷
因为 float 元素会脱离普通文档流，父容器在计算高度时直接“看不见”它。这不是 bug，是 CSS2.1 明确定义的行为——浮动元素不参与块级格式化上下文（BFC）的自动高度计算。
常见错误现象：div 包着几个 float: left 的子项，结果父 div 高度为 0，背景色/边框消失，后续元素往上顶。
- 只在父容器没设置固定高度、且子元素全浮动时出现
- IE6/7 下更明显，连
zoom: 1触发 hasLayout 都不一定稳 - 现代浏览器同样塌陷，别误以为“新浏览器修好了”
clear:both 不是清除浮动，只是避开浮动元素
clear: both 的作用是在当前元素盒模型的上边界，强制下移直到不与任何浮动元素重叠。它不改变父容器的 BFC 状态，也不让父容器“重新包裹”浮动子项。
典型误用场景：在父容器末尾加一个 <div style="clear:both"></div>，以为这就“清除了浮动”。其实只是靠这个空 div 把父容器撑开了一点，属于副作用利用。
- 该方法依赖额外 DOM 节点，语义冗余
- 如果父容器有
padding-bottom或border-bottom，空div撑开的位置可能不对，底部留白异常 - 在 flex 或 grid 布局中混用 float + clear，容易触发不可预测的回流
触发 BFC 是真正可靠的清除方式
让父容器自己形成一个独立的格式化上下文（BFC），就能自动包含内部浮动元素的高度。这是标准定义的解决方案，不是 hack。
常用触发条件（任选其一即可）：
-
overflow: hidden（最常用，但注意内容溢出会被裁剪） -
overflow: auto（滚动条可能意外出现） -
display: flow-root（现代推荐，专为此设计，无副作用） -
float: left/right（父容器自己也浮动，通常不适用） -
position: absolute/fixed（脱离文档流，父容器失去布局意义）
示例：<div style="display: flow-root">...浮动子项...</div> —— 简洁、语义清晰、无兼容性陷阱。
IE6/7 下的兼容方案要分层处理
IE6/7 不支持 display: flow-root，overflow: hidden 在某些缩放或 position 组合下会失效。必须降级使用 hasLayout 触发机制。
实操建议：
- 优先写
display: flow-root，现代浏览器直接受益 - 加一层 IE 条件注释或 CSS hack：
*zoom: 1（仅 IE6/7 解析） - 避免用
height: 1%，它在父容器有 min-height 时可能被覆盖 - 不要混合使用
overflow: hidden和*zoom: 1，IE7 下可能冲突
真正麻烦的不是“怎么清”，而是“清完之后父容器的 padding/margin/border 是否还按预期渲染”——旧浏览器里这些细节经常错位，得靠实际 DOM 结构反复验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
