浮动导致父容器高度塌陷，可通过overflow:hidden触发BFC或使用clearfix清除浮动。前者简单但可能裁剪溢出内容，后者兼容性好且不影響定位元素，推荐根据场景选择方案。
浮动元素脱离文档流，容易导致父容器无法正确包裹子元素，出现高度塌陷或内容溢出。解决这类问题，常用 overflow 属性与 clearfix 技术结合处理，确保布局稳定。
使用 overflow 触发 BFC 包裹浮动元素
给父容器设置 overflow: hidden 或 auto 可触发块格式化上下文（BFC），使父元素能够包含内部浮动的子元素。
优点：简单直接，无需额外标签。 缺点：若子元素有超出父容器的定位内容（如下拉菜单），会被意外裁剪。示例：
.parent {
overflow: hidden;
}
.child {
float: left;
}
通过 clearfix 清除浮动影响
在不隐藏溢出的前提下，使用 clearfix 技术在结构上清除浮动，避免破坏定位元素显示。
立即学习“前端免费学习笔记（深入）”；
常见做法是在父容器末尾插入一个清除浮动的伪元素：
.clearfix::after {
content: "";
display: table;
clear: both;
}
为父元素添加该类即可：
左侧
右侧
推荐组合方案：兼顾兼容性与安全性
现代开发中建议优先使用 clearfix，避免 overflow:hidden 对弹出层的干扰。若布局简单且无溢出需求，可单独用 overflow:hidden 快速解决。
实际项目中两者可共存：
- 通用组件用 clearfix，保证灵活性
- 局部布局用 overflow:auto，控制内容溢出同时闭合浮动
- 注意 IE6/7 等旧浏览器需触发 hasLayout，可加 zoom:1 兼容
基本上就这些，关键是理解浮动脱离文档流的本质，选择合适方法让父容器“感知”子元素的存在。
