为什么需要清除浮动？清除浮动的方式有哪些？

导语：
在前端面试中，“清除浮动”几乎是每位面试官都会问到的基础题。虽然浮动已经不如 Flex 和 Grid 那么常用了，但它在许多老项目中仍然占有一席之地。理解浮动的机制、掌握清除浮动的方式，是面试中体现你前端基础扎实度的关键点。

---

一、面试主题概述

浮动（float）最初是为图文混排设计的 CSS 属性，但前端工程师却将其广泛用于布局。而浮动一旦使用不当，就会引发布局错乱，最典型的问题就是**“父级高度塌陷”**。为了解决这个问题，我们引出了“清除浮动”的概念。

很多初级开发者只知道某个类名加上 .clearfix 就能解决问题，但不理解其背后的原理。在面试中，面试官就是想通过这一题判断你到底是真懂，还是只会背结论。

---

二、高频面试题汇总

1. 为什么使用浮动会导致父元素高度塌陷？
2. 什么是清除浮动？有哪些清除浮动的方式？
3. 请用代码展示三种常见的清除浮动方式。
4. 使用 overflow: hidden 清除浮动会有什么副作用？
5. 清除浮动和 BFC 的关系是什么？

---

三、重点题目详解

题目一：为什么使用浮动会导致父元素高度塌陷？

浮动元素会脱离标准文档流，父级元素无法感知其高度，进而导致父级高度为 0 或塌陷。

<style>
.container {border: 1px solid #000;
}
.float-child {float: left;width: 100px;height: 100px;background: lightblue;
}