浮动与bfc的核心考点在于理解元素脱离文档流后的布局行为及清除浮动的机制。解答时，需明确浮动元素会向左或向右移动并脱离标准流，导致父容器高度塌陷；而bfc（块级格式化上下文）是一个独立的渲染区域，能包含浮动元素并防止外边距折叠。通过触发bfc（如设置overflow: hidden），可以解决因浮动引起的布局问题。
浮动元素的特性与父容器高度塌陷
浮动元素会脱离标准文档流，不占据原来的位置，且不会撑开父容器的高度。这是面试中常考的基础点，表现为父元素高度变为0，影响后续元素的布局。
/* HTML结构 */
<div class="parent">
<div class="child float-left">浮动子元素</div>
</div>
/* CSS样式 */
.parent {
border: 1px solid black;
}
.child {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
预期结果：父容器.border显示为一条细线，内部无高度，子元素蓝色方块悬浮在上方，未撑开父容器。
BFC的触发条件与作用
BFC是CSS中的一个渲染规则，触发后形成独立容器，可包含浮动元素、阻止外边距折叠。常见触发条件包括overflow非visible、display为flow-root等。面试中需强调其如何解决浮动带来的布局问题。
/* 触发BFC修复高度塌陷 */
.parent {
overflow: hidden; /* 触发BFC */
border: 1px solid black;
}
.child {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
预期结果：父容器正确包裹子元素，高度自适应，边框完整显示，子元素不再溢出。
基于overflow:hidden的具体问题分析
当使用overflow: hidden触发BFC时，若子元素宽度超过父容器，会被裁剪而非换行。这体现了BFC对内容溢出的处理机制，面试中需结合具体场景说明其利弊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
