浮动布局塌陷本质是父容器未兜住脱离文档流的浮动子元素致高度坍缩，解决方法有三：一是用clear属性在浮动后加空标签清除；二是给父容器加clearfix类触发BFC；三是改用flex或grid布局天然规避。
浮动布局塌陷，本质是父容器没把浮动子元素“兜住”——子元素脱离文档流后，父容器高度坍缩为0。解决核心就两条路：让父容器参与BFC（块级格式化上下文），或在浮动元素后面插入一个“清道夫”来打断浮动影响。
用 clear 属性手动清除浮动
在浮动元素的后面加一个空标签（如 ），并设置 clear: both，它会强制该元素不与任何浮动元素在同一行，从而撑开父容器高度。
- HTML 中写法示例：
- CSS 对应样式：.clearfix { clear: both; height: 0; overflow: hidden; }
- 注意：这个空 div 必须放在所有浮动子元素的 末尾，且不能被 display: none 或 visibility: hidden 隐藏
用 clearfix 类触发 BFC 清除浮动（推荐）
给父容器本身加一个 clearfix 类，不依赖额外标签，更语义、更干净。原理是通过伪元素生成内容并清除浮动，同时让父容器形成 BFC，自动包含浮动子元素。
- 标准 clearfix 写法（兼容 IE8+）：
.clearfix::before,
.clearfix::after {
content: ""; display: table;
}
.clearfix::after { clear: both; } - 现代写法可简化为：.clearfix { overflow: hidden; zoom: 1; }（zoom 触发 IE 低版本 hasLayout）
- 关键点：必须加在 浮动子元素的直接父容器上，不是最外层大盒子
现代替代方案：flex 或 grid 布局（规避浮动）
如果只是做横向排列（比如导航栏、卡片列表），直接用 display: flex 替代 float 更简单可靠，天然无塌陷问题。
立即学习“前端免费学习笔记（深入）”；
- 父容器设 display: flex，子项自动水平排列，无需 clear
- 对齐、换行、间距都用 flex 属性控制，代码更直观，维护成本更低
- 兼容性足够好（Flexbox 支持到 IE10+，日常项目基本无障碍）
