浮动布局塌陷本质是父容器未
兜住脱离文档流的浮动子元素致高度坍缩，解决方法有三：一是用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+，日常项目基本无障碍）
兜住脱离文档流的浮动子元素致高度坍缩，解决方法有三：一是用clear属性在浮动后加空标签清除；二是给父容器加clearfix类触发BFC；三是改用flex或grid布局天然规避。