清除浮动常用clearfix或BFC，Flex布局则无需浮动；现代推荐使用Flex，兼容旧场景时可条件切换并注意父容器处理。
在传统 CSS 布局中，浮动（float）常用于实现多列布局或文本环绕图片等效果，但浮动元素会脱离文档流，导致父容器高度塌陷。因此需要“清除浮动”。而现代布局更多使用 Flexbox，它天然解决了浮动带来的问题。但在一些兼容老浏览器或混合使用场景中，可能需要同时处理清除浮动和 Flex 布局的兼容性。
清除浮动的常用方法
当使用 float 时，父容器无法自动包含子元素的高度，需手动清除浮动：
- 使用伪类 ::after 清除：最常见且推荐的方式 .clearfix::after {
- 将该类应用到浮动元素的父容器上即可恢复高度计算
- 触发 BFC（块级格式化上下文）：通过 overflow、display: flow-root 等方式 .container {
- 注意：overflow 可能裁剪内容或影响滚动，需谨慎使用
content: "";
display: block;
clear: both;
}
.container {
zoom: 1; /* 兼容 IE6/7 */
}
overflow: hidden; /* 或 auto、scroll */
}
Flex 布局替代浮动
Flex 布局是现代 CSS 推荐的方案，无需浮动也能实现对齐与分布，且父容器自然包含子项：
- 设置 display: flex 后，子元素默认在同一行排列，不脱离文档流
- 无需清除浮动，父容器高度自动适应子元素
- 支持主轴与交叉轴对齐控制（justify-content, align-items） .flex-container {
display: flex;
}
.flex-item {
flex: 1;
}
清除浮动与 Flex 的兼容处理
在项目升级或需要兼容旧代码时，可能同时存在 float 和 flex 元素，需注意以下几点：
立即学习“前端免费学习笔记（深入）”；
- 若父元素已设为 display: flex，其子元素的 float 将失效 —— Flex 容器会忽略子元素的浮动
- 不要对 Flex 子项使用 clear 或清除浮动技巧，逻辑冲突且无意义
- 在响应式设计中，可条件性切换布局： .container {
- 此时需确保小屏幕下正确清除浮动
display: flex;
}
@media (max-width: 768px) {
.container {
display: block;
}
.item {
float: left;
width: 50%;
}
.item::after { content:""; display:block; clear:both; }
}
基本上就这些。优先使用 Flex 布局，避免依赖浮动；若必须支持老浏览器或遗留代码，用 clearfix 保证结构完整。两者不必强行统一，按上下文选择合适方案即可。
