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