清除浮动的核心是让父容器正确包裹浮动子元素以避免高度塌陷，最常用方式是clearfix技巧（通过伪元素触发BFC并clear:both），现代推荐用flex或grid布局替代浮动。

清除浮动的核心是让父容器能正确包裹内部浮动元素，避免高度塌陷。最常用且可靠的方式是使用 clearfix 技巧，它通过伪元素触发 BFC（块级格式化上下文）并清除浮动影响。

为什么需要清除浮动

当子元素设置 float: left 或 float: right 后，会脱离文档流，导致父容器无法感知其高度，出现“高度塌陷”——父容器高度变为 0，背景、边框、下边元素会上移，布局错乱。

clearfix 的经典实现（推荐）

这是目前最通用、兼容性好（支持 IE8+）、语义清晰的写法：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

.clearfix::before,<br>.clearfix::after {<br>  content: "";<br>  display: table;<br>}<br>.clearfix::after {<br>  clear: both;<br>}<br>.clearfix {<br>  *zoom: 1; /* IE6/7 触发 hasLayout */<br>}

• ::before 和 ::after 创建两个匿名表格单元格，使父容器形成 BFC，包容浮动子元素
• ::after 的 clear: both 确保它出现在所有浮动元素下方，撑开父容器底部
• *zoom: 1 是 IE6/7 的 hack，触发 hasLayout，实现类似 BFC 的效果

现代更简洁的替代方案（Flex / Grid）

如果不需要兼容老浏览器，可直接用现代布局方式替代浮动：

立即学习“前端免费学习笔记（深入）”；

• 给父容器设 display: flex，子项自动排列且父容器正常包裹
• 用 display: grid 配合 grid-template-columns 实现多列布局，无需浮动
• 二者天然不脱离文档流，不存在塌陷问题，也无需 clearfix

其他清除方法对比

• 空 div 法：<div style="clear:both"></div> —— 简单但污染 HTML 结构，不推荐
• overflow:hidden —— 触发 BFC，但可能隐藏溢出内容（如阴影、下拉菜单），有副作用
• display:flow-root（CSS3）—— 新标准属性，专为创建无副作用的 BFC 设计，Chrome 64+/Firefox 62+ 支持，可作为 clearfix 的轻量替代