清除浮动

一、浮动的本质与问题

浮动（float） 会使元素脱离文档流，导致其父元素高度塌陷（父元素无法自适应子元素高度）。
典型场景：

<div class="parent">
  <div class="float-child" style="float: left;">浮动元素</div>
  <div class="float-child" style="float: left;">浮动元素</div>
</div>
<!-- 父元素 .parent 高度为 0，出现高度塌陷 -->

二、清除浮动的六大方案

1. 父元素添加 overflow: hidden

.parent {
  overflow: hidden;
  /* 或 overflow: auto / scroll */
}

• 原理：利用 BFC（块级格式化上下文）特性，使父元素包含浮动子元素
• 适用场景：子元素无超出父元素的需求（超出会被隐藏）

2. 伪元素清除法（推荐方案）

.clearfix::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

• 使用：给父元素添加 .clearfix 类
• 原理：通过伪元素模拟一个空块级元素，clear: both 阻止浮动影响
• 优势：无副作用，符合 W3C 标准

3. 父元素设置 display: flow-root

.parent {
  display: flow-root;
}

• 原理：创建新的格式化上下文（类似 BFC）
• 兼容性：现代浏览器支持（IE 不支持）

4. 父元素设置 float

.parent {
  float: left; /* 或 right */
}

• 注意：需搭配清除浮动处理父元素的后续元素
• 缺点：可能影响页面整体布局

5. 父元素设置 display: table

.parent {
  display: table;
}

• 原理：display: table 会触发 hasLayout（IE 兼容）
• 缺点：可能改变元素盒模型特性

三、问题

1. 问：为什么浮动会导致父元素高度塌陷？

• 答：
  • 浮动元素脱离文档流，不占用父元素的高度计算；
  • 父元素未触发 BFC（块级格式化上下文），无法包含浮动子元素。

2. 问：clear: both 的作用是什么？

• 答：
  • 阻止元素两侧出现浮动元素；
  • 常用于清除浮动的影响，使元素在浮动元素下方显示。

3. 问：伪元素清除法的 content: "" 有什么作用？

• 答：
  • content 是伪元素的必须属性（否则伪元素不显示）；
  • 空字符串表示创建一个空内容的伪元素，配合 display: block 使其成为块级元素。

4. 问：overflow: hidden 清除浮动时的副作用？

• 答：
  • 子元素超出父元素的部分会被隐藏；
  • 若子元素需要溢出显示（如下拉菜单），不适用此方案。

四、最佳实践与场景选择

方案	优点	缺点	适用场景
伪元素清除法	无副作用，兼容性好	需额外添加类名	通用场景，推荐使用
overflow: hidden	代码简洁	可能隐藏溢出内容	子元素无溢出需求
display: flow-root	现代语法，逻辑清晰	兼容性差（IE 不支持）	现代项目，无需兼容旧浏览器