浮动元素脱离文档流致父容器高度塌陷，推荐用clearfix伪元素（.clearfix::after{content:"";display:table;clear:both}）触发BFC；次选overflow:hidden/auto；现代项目宜用Flexbox或Grid替代浮动。
浮动元素会脱离文档流，导致父容器高度塌陷，背景或边框无法包裹子元素。解决方法是让父容器“清除浮动”，重新计算高度。
使用clearfix伪元素（推荐）
这是最通用、语义清晰的方案，兼容所有现代浏览器，不影响布局和溢出行为。
- 给父容器添加一个类名，比如 .clearfix
- 在CSS中定义：
content: "";
display: table;
clear: both;
}
原理是利用伪元素生成一个块级、清除两侧浮动的空内容，触发父容器BFC（块级格式化上下文），从而包裹浮动子元素。
设置 overflow: auto 或 hidden
简单快捷，适合快速修复，但需注意副作用：
立即学习“前端免费学习笔记（深入）”；
- overflow: auto：可能意外出现滚动条（尤其内容刚好溢出时）
- overflow: hidden：更常用，但会裁剪超出父容器的内容（如绝对定位子元素偏移过大）
两者都能触发BFC，使父容器包含浮动子元素的高度，背景自然显示。
其他可选方式（按场景选用）
- 给父容器也设 float: left（不推荐）：父容器也会脱离文档流，影响后续布局
- 在最后一个浮动子元素后加空标签
<div style="clear:both"></div>（过时）：增加无意义HTML，维护性差 - 用 display: flex 或 display: grid 替代浮动布局（现代方案）：从根本上避免浮动塌陷问题
基本上就这些，优先用clearfix，临时调试可用overflow:hidden，长期项目建议转向Flexbox或Grid布局。
