導語：
在前端面試中，“清除浮動”幾乎是每位面試官都會問到的基礎題。雖然浮動已經不如 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;
}