使用clearfix或display:flow-root可解决浮动导致的父元素高度塌陷，前者通过伪元素清除浮动，后者触发BFC包含浮动子元素。
浮动元素会导致父元素无法正确包裹子元素，出现父元素高度塌陷的问题。这是因为浮动元素脱离了正常的文档流，父元素“看不到”它的存在。要解决这个问题，可以通过以下几种CSS方法来清除浮动影响，使父元素正常包含浮动子元素。
1. 使用clearfix技巧（推荐）
给父元素添加一个clearfix类，通过伪元素在DOM末尾插入一个隐藏的块级元素并清除浮动。
.clearfix::after {
content: "";
display: table;
clear: both;
}
将这个类应用到包含浮动子元素的父容器上：
左浮动右浮动
2. 设置父元素触发BFC（块格式化上下文）
BFC元素能包含内部的浮动元素，不会发生塌陷。可通过以下任意一种方式触发BFC：
立即学习“前端免费学习笔记（深入）”；
- overflow: hidden 或 auto（内容不超出时推荐 hidden）
- display: flow-root（现代推荐方式，专为创建BFC设计）
- float: left/right（会改变父元素布局，一般不推荐）
- position: absolute/fixed（脱离文档流，慎用）
最干净的方法是使用 display: flow-root：
.parent {
display: flow-root;
}
3. 给父元素设置固定高度（不推荐）
虽然可以手动设置 height 属性让父元素有高度，但这样不灵活，内容变化时容易出问题，仅适用于高度固定的场景。
4. 在最后添加清除浮动的元素（传统方法）
在浮动元素末尾添加一个空元素并设置 clear: both：
内容
这种方法破坏了结构与样式的分离，不推荐在现代开发中使用。
基本上就这些常用方法。推荐优先使用 clearfix 或 display: flow-root，它们语义清晰、兼容性好且不影响布局。
