为什么需要清除浮动？清除浮动的方式有哪些？
导语：
在前端面试中，“清除浮动”几乎是每位面试官都会问到的基础题。虽然浮动已经不如 Flex 和 Grid 那么常用了，但它在许多老项目中仍然占有一席之地。理解浮动的机制、掌握清除浮动的方式，是面试中体现你前端基础扎实度的关键点。
一、面试主题概述
浮动（float）最初是为图文混排设计的 CSS 属性，但前端工程师却将其广泛用于布局。而浮动一旦使用不当，就会引发布局错乱，最典型的问题就是**“父级高度塌陷”**。为了解决这个问题，我们引出了“清除浮动”的概念。
很多初级开发者只知道某个类名加上 .clearfix 就能解决问题，但不理解其背后的原理。在面试中，面试官就是想通过这一题判断你到底是真懂，还是只会背结论。
二、高频面试题汇总
- 为什么使用浮动会导致父元素高度塌陷？
- 什么是清除浮动？有哪些清除浮动的方式？
- 请用代码展示三种常见的清除浮动方式。
- 使用
overflow: hidden清除浮动会有什么副作用？ - 清除浮动和 BFC 的关系是什么？
三、重点题目详解
题目一：为什么使用浮动会导致父元素高度塌陷？
浮动元素会脱离标准文档流，父级元素无法感知其高度，进而导致父级高度为 0 或塌陷。
<style>
.container {border: 1px solid #000;
}
.float-child {float: left;width: 100px;height: 100px;background: lightblue;
}