子元素浮动导致父容器高度塌陷，可通过clearfix类或overflow:hidden解决；推荐使用clearfix::after添加清浮动，避免溢出问题，而overflow:hidden触发BFC但可能裁剪内容。
当子元素设置了 float 属性后，会脱离文档流，导致父容器无法正确计算高度，从而出现“高度塌陷”问题。这会影响页面布局，比如背景、边框无法正常显示。解决这个问题常用的方法有两种：使用 clearfix 类或设置 overflow: hidden。
使用 clearfix 类（推荐）
这种方法通过在父容器上添加一个专门的类来清除浮动，不影响其他样式结构，语义清晰，兼容性好。
定义 clearfix 类：
.clearfix::after {content: "";
display: table;
clear: both;
}
在 HTML 中给父容器加上这个类：
立即学习“前端免费学习笔记（深入）”；
左侧内容
右侧内容
这样父容器就能包含所有浮动子元素，避免高度塌陷。
设置 overflow: hidden
给父容器设置 overflow: hidden 可以触发 BFC（块级格式化上下文），使父元素能包含内部浮动元素。
CSS 示例：
.parent {overflow: hidden;
background: #eee;
padding: 10px;
}
HTML 结构：
浮动内容
注意：此方法简单直接，但若父容器内有需要溢出显示的内容（如下拉菜单、提示框），可能会被意外裁剪。
选择哪种方式？
如果只是为了解决浮动塌陷，且不需要内容溢出，overflow: hidden 快速有效。但在复杂布局中，更推荐使用 clearfix，它专为清除浮动设计，不会带来副作用。
基本上就这些，不复杂但容易忽略。
