使用 overflow:hidden 可触发BFC解决浮动导致的父容器高度塌陷，适用于简单布局；但可能裁剪溢出内容，需注意避免影响下拉菜单等元素，必要时可改用伪元素清除法。
在CSS布局中，浮动元素常导致父容器高度塌陷，影响页面结构。使用 overflow: hidden 是一种简单有效的清除浮动方法，同时具备其他实用特性。
1. 基本用法：解决父容器高度塌陷
当子元素设置 float:left 或 float:right 后，父容器无法自动包裹子元素，出现高度为0的问题。给父元素添加 overflow:hidden 可触发BFC（块级格式化上下文），使父容器包含浮动子元素。
- 父元素设置 overflow:hidden 后，会建立BFC，从而包含内部浮动元素
- 无需额外HTML标签或伪元素，代码简洁
- 适用于简单的两栏、多栏布局场景
2. 注意事项：避免内容被意外裁剪
overflow:hidden 会将超出容器范围的内容隐藏，若子元素定位超出边界（如绝对定位下拉菜单、提示框等），可能被截断。
- 慎用于含有弹出层、下拉菜单的容器
- 若需清除浮动又保留溢出显示，可改用伪元素方案（::after）
- 可通过临时设置 border 或背景色检查是否误裁剪内容
3. 实际应用场景示例
常见于导航栏、图片文字混排、卡片布局等需要自适应高度的模块。
立即学习“前端免费学习笔记（深入）”；
- 导航条内多个 float:left 的菜单项，父级加 overflow:hidden 防止塌陷
- 图文混排区域中，图片浮动，文字环绕，父容器用该方式闭合高度
- 响应式布局中配合宽度百分比，实现灵活结构
基本上就这些。overflow:hidden 清除浮动虽简单，但要留意其副作用。理解原理后，能更灵活地选择适合项目的布局方案。
