清除浮动是为解决父元素因子元素浮动导致高度塌陷的问题，使用 clearfix 通过伪元素插入并清除浮动，使父容器正确包裹子元素；现代推荐使用 display: flow-root 或 Flexbox 布局以避免此类问题。
在CSS布局中，浮动（float）常用于实现多列排列，比如图片与文字环绕、列表横向排列等。但使用浮动后，父元素往往无法正确包裹子元素，导致布局错位或背景、边框显示异常。这个问题在表格式布局或列表展示中尤为常见。解决这一问题的关键是“清除浮动”，而 clear fix 是一种广泛使用的解决方案。
为什么需要清除浮动？
当一个容器内的子元素全部设置了浮动（如 float: left 或 float: right），这些元素会脱离正常文档流，导致父容器“塌陷”——即父元素高度变为0，无法包含浮动子元素。这会引发后续元素上移、背景不显示、边框错位等问题。
示例场景：你有一个无序列表，每个列表项向左浮动以实现横向排列，但整个列表区域没有背景色或边框，因为父元素高度为0。这时就需要清除浮动来恢复正常的盒模型表现。
什么是 Clear Fix？
Clear Fix 是一种通过CSS技巧，在不添加额外HTML标签的前提下，让父容器包含其所有浮动子元素的方法。它利用伪元素（::before 和 ::after）在父元素内部插入一个不可见的内容，并设置清除浮动的样式，从而闭合浮动。
立即学习“前端免费学习笔记（深入）”；
最经典的 clear fix 写法如下：
.clearfix::after {
content: "";
display: table;
clear: both;
}
将这个类应用到包含浮动元素的父容器上，即可解决高度塌陷问题。
- content: ""：生成一个伪元素内容，必须存在才能生效。
- display: table：防止顶部外边距折叠，也可用 block。
- clear: both：确保该元素不与左右浮动元素并排，强制换行，从而撑开父容器。
现代推荐写法（兼容性好且简洁）
如果你不需要支持非常旧的浏览器（如 IE8 以下），可以使用更简洁可靠的方案：
.clearfix::after {
content: "";
display: block;
clear: both;
}
然后在HTML中：
左侧内容右侧内容
这样父 div 就能正确包含两个浮动子元素了。
替代方案：使用 overflow 或 Flexbox
除了 clear fix，还有其他方式可以包含浮动：
- overflow: hidden：给父元素设置此属性可触发BFC（块级格式化上下文），自动包含浮动。但注意可能裁剪溢出内容。
-
display: flow-root：现代CSS属性，专门用于创建新的BFC并清除内部浮动，无需伪元素。
.container { display: flow-root; }推荐用于新项目，语义清晰，兼容性逐步提升。 -
改用 Flex 或 Grid 布局：如果只是想实现横向排列，建议直接使用
display: flex，从根本上避免浮动带来的问题。
基本上就这些。对于仍需使用浮动的场景，给父元素加上 .clearfix 类是最稳妥的做法；而在新项目中，优先考虑现代布局方式会更高效、更少出错。
