使用clearfix或overflow:hidden解决浮动导致的父元素高度塌陷问题，前者通过伪元素清除浮动，后者触发BFC包含浮动元素，推荐优先采用Flex布局避免浮动问题。
当CSS中使用浮动（float）时，父元素无法自动撑开以包含浮动的子元素，导致高度塌陷，影响页面布局。解决这个问题常用的方法是清除浮动，主要有两种实用方式：使用 clearfix 或设置父元素 overflow: hidden。
1. 使用clearfix清除浮动
clearfix 是一种兼容性好、广泛使用的清除浮动技术，特别适用于不希望改变父元素溢出行为的场景。
给父容器添加一个clearfix类，通过伪元素在内容末尾插入一个隐藏的块级元素并清除浮动：
.clearfix::after {
content: "";
display: table;
clear: both;
}
然后在HTML中为父元素添加该类：
立即学习“前端免费学习笔记（深入）”；
<div class="clearfix"> <div style="float: left;">左浮动</div> <div style="float: right;">右浮动</div> </div>
这样父元素就能正确包含所有浮动子元素，避免高度塌陷。
2. 使用 overflow: hidden 触发BFC
将父元素的CSS设置为 overflow: hidden 可以触发块级格式化上下文（BFC），使父元素形成独立渲染区域，从而包含内部浮动元素。
.container {
overflow: hidden;
}
这种方法简单直接，但要注意：如果子元素有超出父容器的内容（如下拉菜单、定位元素），会被裁剪。因此需评估是否会影响视觉效果。
3. 其他注意事项
- 避免只用
br + clear:both，语义差且增加无意义标签。 - Flex、Grid 布局可替代浮动实现复杂排版，从根本上避免浮动问题。
- 现代开发推荐优先使用 Flexbox，更简洁可控。
基本上就这些。根据项目情况选择合适方法，clearfix灵活通用，overflow:hidden简洁高效。关键是理解浮动对文档流的影响，才能准确处理布局问题。
