解决浮动导致父容器高度塌陷的核心方法有三：一是浮动后加clear:both空标签，兼容性好但语义弱；二是父容器设overflow:hidden触发BFC，简洁但可能裁剪溢出内容；三是伪元素clearfix法，兼顾语义、兼容与维护性，为现代项目首选。
浮动元素会脱离文档流，导致父容器无法正确计算高度，页脚就可能上移盖住内容。解决的核心思路是让父容器“包含”浮动，或者清除浮动影响。
在浮动元素后加清除标记
这是最直接的方法，在所有浮动元素的末尾插入一个空元素，并设置 clear: both：
左栏
右栏
- 适用于结构可控、不介意加空标签的场景
- 语义稍弱，但兼容性极好（包括 IE6）
- 也可用伪元素替代空标签，更干净
对父容器设置 overflow: hidden
给浮动元素的直接父容器加上 overflow: hidden（或 overflow: auto），能触发 BFC（块级格式化上下文），使其自动包裹浮动子元素：
立即学习“前端免费学习笔记（深入）”；
.content { overflow: hidden; }
- 代码简洁，无需额外 HTML
- 注意：如果父容器内有定位元素或需要溢出显示的内容，可能被意外裁剪
- IE7+ 支持良好，现代浏览器无问题
使用伪元素清除法（推荐）
在父容器上定义一个通用清除类，用 ::after 生成清除元素：
.clearfix::after {
content: ""; display: table; clear: both;
}
.content {
zoom: 1; /* IE6/7 兼容 */
}
- 兼顾语义、兼容性和可维护性
- 一行清除，复用性强，现代项目首选
- 避免了空标签，也不影响 overflow 行为
基本上就这些。选哪种取决于你的兼容要求和项目规范——小项目用 overflow: hidden 最快，老项目加 clearfix 更稳妥，临时调试加 clear: both 也行。
