浮动元素脱离文档流并退出当前bfc，触发ifc实现文字环绕；其自身成为独立浮动框，父容器若未创建新bfc则高度塌陷；clear仅对后续块级兄弟元素生效，overflow:hidden通过创建bfc来包含浮动元素高度。

直接说“浮动让元素脱离文档流”是不够的——面试官想听的是你是否理解浏览器渲染时的格式化上下文切换和布局计算逻辑。

float 触发的是 BFC 还是 IFC？

float 本身不直接创建 BFC，但它会让元素参与 IFC（行内格式化上下文）的构建过程：当一个块级元素设了 float: left，它会脱离当前块级格式化上下文（BFC），但其后续的行内内容（如文字、span）会进入一个围绕它的 IFC，从而实现环绕效果。

• float 元素自身变成“浮动框”，既不属于标准流中的块盒，也不属于行内盒，而是一种独立的定位单元
• 父容器若未形成新 BFC，就按“仅含非浮动子元素”的高度来计算——所以塌陷是规范行为，不是 bug
• display: inline-block、position: absolute、overflow: hidden 等才是显式创建 BFC 的方式；float 是隐式“退出”当前 BFC

clear: both 为什么不能写在浮动元素自己身上？

因为 clear 只对块级盒的边界位置生效，且只作用于该元素自身的上外边距（margin-top）起始位置。浮动元素已经脱离文档流，clear 对它没有约束力。

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

• 写在浮动元素上：div.float-left { float: left; clear: both; } —— 完全无效，浏览器忽略
• 必须写在紧跟其后的兄弟块级元素上，比如 <div class="clearfix"></div> 或伪元素 ::after
• 这也是为什么 .clearfix::after 必须用 display: table 或 block：只有块级盒才支持 clear 计算

overflow: hidden 为什么能“撑开”父容器高度？

关键不是“隐藏溢出”，而是它强制父容器生成新的 BFC。BFC 的规则之一就是：容器会包含内部所有浮动元素的高度。

• overflow: visible（默认）→ 不创建 BFC → 父容器看不见浮动子元素 → 高度塌陷
• overflow: hidden / auto / scroll → 创建 BFC → 浮动子元素被纳入高度计算
• 副作用真实存在：如果子元素有 position: absolute 且超出父容器范围，会被裁剪——比如下拉菜单、tooltip 一加就消失

真正容易被忽略的是：现在连“清除浮动”这个动作本身都快成历史概念了。display: flex 和 display: grid 容器里，float 会被忽略，clear 失效，overflow 清浮也失去意义。面试问浮动，其实是在看你能不能把“脱离文档流→影响BFC→高度塌陷→触发清除”这条链路说透，而不是背几个技巧。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！