清除浮动是为了解决父元素因子元素脱离文档流而导致的高度塌陷问题，常见方法包括添加空元素并使用clear:both、利用伪元素::after实现clearfix以及通过BFC（如display:flow-root）包含浮动元素，推荐使用伪元素法或display:flow-root以保持结构清晰且兼容现代布局需求。
当子元素设置了浮动（float）后，父元素往往无法正确“感知”子元素的高度，导致父元素高度塌陷。这在实际开发中非常常见，比如布局错乱、背景不显示、边框缺失等问题。解决这类问题的关键是清除浮动，让父容器能正确包裹浮动元素，实现高度自适应。
为什么需要清除浮动？
浮动元素会脱离文档流，父元素在计算高度时会忽略这些子元素，造成视觉上的断层。例如：
• 两个子div分别左浮动，父div高度可能为0• 背景、边框、阴影等样式无法正常显示
• 后续元素可能错误地上移，影响布局
常见的清除浮动方法
以下是几种实用且兼容性良好的清除浮动技巧，可根据项目需求选择使用。
1. 使用 clear 属性添加空元素
立即学习“前端免费学习笔记（深入）”；
在浮动元素末尾添加一个空的块级元素，并设置 clear: both。
• HTML 中插入• CSS 设置 .clear { clear: both; height: 0; overflow: hidden; }
优点是简单直观，缺点是增加了无意义的DOM节点。
2. 使用伪元素清除法（推荐）
通过 ::after 伪元素在内容末尾插入并清除浮动，不增加额外标签。
.clearfix::after {content: "";
display: block;
clear: both;
}
将 clearfix 类应用到需要包含浮动的父元素上。现代开发中广泛使用，结构干净。
3. 触发BFC（块级格式化上下文）
让父元素形成BFC，从而包含其内部浮动元素。
• overflow: hidden / auto• display: flow-root （更现代的写法）
• float: left/right （不推荐，影响布局）
其中 display: flow-root 是专为包含浮动设计的新属性，语义清晰，不影响溢出表现。
实际应用场景建议
在响应式布局或组件化开发中，推荐统一使用以下方案：
• 全局定义 .clearfix 类，用伪元素方式清除• 对于现代浏览器优先尝试 display: flow-root
• 避免滥用 overflow: hidden，防止意外裁剪内容
例如卡片组件内有左右浮动的图标和文字时，给卡片容器加上 clearfix 类即可自动撑高。
基本上就这些。掌握清除浮动的核心原理和几种主流方法，就能有效避免布局塌陷问题，让父元素真正实现高度自适应。
