clearfix通过伪元素清除浮动，防止父容器高度塌陷。定义.clearfix::after{content:"";display:block;clear:both}并应用于父容器，即可包含浮动子元素。现代布局推荐使用flex或grid，或采用overflow:hidden、display:flow-root等方法替代。
当元素浮动时，可能会导致父容器无法正确包裹子元素，出现高度塌陷等问题。使用 clearfix 是一种经典的清除浮动方法。它不需要额外的 HTML 标签，只需为父容器应用一个特定的 CSS 类即可。
clearfix 是通过在父容器上添加一个伪元素（::after），并在该伪元素中清除浮动，从而让父容器包含所有浮动的子元素。
定义一个名为 clearfix 的 CSS 类，并将其应用到包含浮动元素的父容器上。
.clearfix::after {然后在 HTML 中给需要清除浮动的父元素加上这个类：
立即学习“前端免费学习笔记（深入）”；
<div class="clearfix">这样父 div 就能正确包含两个浮动子元素，不会发生高度塌陷。
虽然 clearfix 依然有效，但现在更推荐使用 flex 或 grid 布局来代替浮动布局。如果仍需处理浮动，也可以使用：
基本上就这些。clearfix 方法简单可靠，适合维护老项目或必须使用浮动的场景。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
402
收藏
