浮动元素脱离文档流导致父容器高度塌陷，后续内容重叠；使用clearfix通过::after伪元素添加clear: both可解决此问题，现代布局推荐flex或display: flow-root。

在使用CSS浮动（float）进行布局时，元素脱离文档流可能导致父容器高度塌陷，相邻内容出现重叠或错位。解决这类问题的关键是正确清除浮动，其中最常用的方法就是使用clearfix技术。

为什么浮动会导致重叠

当一个元素设置了 float: left 或 float: right，它会脱离正常的文档流，导致其父容器无法感知它的存在，从而可能出现高度为0的情况。后续的非浮动元素可能会“上移”，占据本该留出的空间，造成视觉上的重叠。

例如：多个浮动的子div放在一个没有设定高度的父div中，父div可能显示为一条线甚至不可见，后面的标题或段落就会直接覆盖在浮动区域上方。

使用clearfix清除浮动

clearfix是一种通过伪元素在父容器末尾插入一个隐藏的块级元素，并为其设置清除浮动的样式，从而让父容器包含所有浮动子元素的技术。

具体CSS代码如下：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

之后只需将这个类应用到需要包含浮动子元素的父级即可：

  左侧栏目
  右侧栏目

接下来的内容不会与上面的浮动区域重叠

现代替代方案与注意事项

虽然clearfix非常实用，但在现代开发中也可以考虑其他方式避免浮动带来的问题：

不过在维护老项目或必须使用浮动布局时，clearfix仍是稳定可靠的解决方案。

基本上就这些，掌握 clearfix 的原理和写法，就能有效防止因浮动引起的布局混乱。不复杂但容易忽略。