clearfix是一种通过伪元素清除浮动以防止父容器塌陷的css技术，使用时将包含content: ""; display: table; clear: both;的clearfix类应用于父容器，使其自适应包裹浮动子元素；现代布局中推荐优先使用flexbox或grid替代。
当元素使用 float 属性进行布局时，父容器常常无法正确包含浮动的子元素，导致布局塌陷。为解决这个问题，可以使用 clearfix 技术来清除浮动，确保父容器能完整包裹子元素。
什么是clearfix？
clearfix 是一种CSS技巧，通过在父容器上应用特定样式，自动清除其内部浮动元素的影响，使父元素能够自适应高度，避免布局错乱。
如何定义和使用clearfix类
创建一个名为 clearfix 的CSS类，并将其应用到包含浮动元素的父容器上。
常见的clearfix写法如下：.clearfix::after {
content: "";
display: table;
clear: both;
}
说明：
立即学习“前端免费学习笔记（深入）”；
- content: ""：生成一个伪元素内容为空。
- display: table：确保伪元素参与块级布局，兼容性更好。
- clear: both：清除左右两侧的浮动，强制后续内容（或伪元素）不与浮动元素并排。
在HTML中使用：
<div class="clearfix"> <div style="float: left;">左侧内容</div> <div style="float: right;">右侧内容</div> </div>
此时父容器会正确包含两个浮动子元素，不会发生高度塌陷。
现代布局中的替代方案
虽然clearfix仍然有效，但在现代开发中，推荐使用更先进的布局方式避免依赖浮动：
-
Flexbox：使用
display: flex可自然消除浮动需求。 - CSS Grid：适用于二维布局，无需浮动即可实现复杂排列。
- overflow: hidden：简单场景下可在父元素设置此属性触发BFC，包含浮动，但可能裁剪溢出内容。
基本上就这些。clearfix是一个经典且兼容性良好的解决方案，适合维护旧项目或需要支持老浏览器的场景。新项目建议优先考虑Flex或Grid布局。不复杂但容易忽略。
