浮动元素脱离文档流导致父容器高度塌陷，后续内容重叠；使用clearfix通过::after伪元素添加clear: both可解决此问题，现代布局推荐flex或display: flow-root。
在使用CSS浮动（float）进行布局时，元素脱离文档流可能导致父容器高度塌陷，相邻内容出现重叠或错位。解决这类问题的关键是正确清除浮动，其中最常用的方法就是使用clearfix技术。
为什么浮动会导致重叠
当一个元素设置了 float: left 或 float: right，它会脱离正常的文档流，导致其父容器无法感知它的存在，从而可能出现高度为0的情况。后续的非浮动元素可能会“上移”，占据本该留出的空间，造成视觉上的重叠。
例如：多个浮动的子div放在一个没有设定高度的父div中，父div可能显示为一条线甚至不可见，后面的标题或段落就会直接覆盖在浮动区域上方。
使用clearfix清除浮动
clearfix是一种通过伪元素在父容器末尾插入一个隐藏的块级元素，并为其设置清除浮动的样式，从而让父容器包含所有浮动子元素的技术。
立即学习“前端免费学习笔记（深入）”；
- 给包含浮动子元素的父容器添加一个类，如 .clearfix
- 使用 ::after 伪元素生成一个看不见的内容
- 设置该伪元素为块级元素并应用 clear: both
具体CSS代码如下：
.clearfix::after {
content: "";
display: block;
clear: both;
}
之后只需将这个类应用到需要包含浮动子元素的父级即可：
<div class="clearfix"> <div style="float: left;">左侧栏目</div> <div style="float: right;">右侧栏目</div> </div> <p>接下来的内容不会与上面的浮动区域重叠</p>
现代替代方案与注意事项
虽然clearfix非常实用，但在现代开发中也可以考虑其他方式避免浮动带来的问题：
- 使用 flex 布局：更灵活、语义清晰，无需处理浮动清除
- 使用 overflow: hidden：给父元素设置此属性可触发BFC，包裹浮动元素（但可能裁剪溢出内容）
- display: flow-root：新兴标准，能创建新的块格式化上下文，自动包含子浮动元素
不过在维护老项目或必须使用浮动布局时，clearfix仍是稳定可靠的解决方案。
基本上就这些，掌握 clearfix 的原理和写法，就能有效防止因浮动引起的布局混乱。不复杂但容易忽略。
