17370845950

清除浮动是为解决父元素因子元素浮动导致高度塌陷的问题，使用 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 类是最稳妥的做法；而在新项目中，优先考虑现代布局方式会更高效、更少出错。