清除浮动本质是解决父容器因浮动子元素脱离文档流导致的高度塌陷，核心在于理解文档流、bfc及渲染机制；overflow:hidden通过触发bfc使父容器包含浮动元素高度，:after伪元素中display:table创建bfc并支持clear，clear:both则强制伪元素下移撑开父高。

不是因为“考得频繁”，而是因为清除浮动这个问题，直接暴露你对文档流、BFC、渲染机制这三层底层逻辑的真实理解程度——背出五种方法但说不清 overflow: hidden 为什么能撑开父高，和能讲清 :after 里 display: table 和 clear: both 各自起什么作用的人，根本不在同一认知层。

父容器高度塌陷不是bug，是float的必然行为

浮动元素脱离文档流后，父容器计算高度时完全“看不见”它们。这不是浏览器缺陷，而是 CSS 规范明确规定的渲染逻辑：浮动框不参与块级格式化上下文（BFC）的高度计算。

• float: left 会隐式触发 display 计算值变为 block，但依然不占文档流位置
• 父容器若没设置 height 或没形成新 BFC，高度就按内部非浮动内容计算——结果常为 0
• 这种塌陷会直接影响后续兄弟元素的定位，比如页脚上移、背景色消失、margin 失效

overflow: hidden 能“清浮”是因为它创建了BFC

overflow: hidden 不是靠“隐藏溢出”来清浮，而是因为它强制父容器成为一个独立的块级格式化上下文（BFC），而 BFC 的一个核心特性就是：**包含并计算内部浮动元素的高度**。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• overflow: auto 和 overflow: scroll 同样创建 BFC，效果一致，只是多了滚动条逻辑
• overflow: visible（默认值）不创建 BFC，所以无效
• 副作用真实存在：内容真超出时会被裁剪，position: absolute 子元素也可能被截断

:after伪元素清除法的关键在 display 和 clear 的分工

经典 .clearfix:after 写法里，display: table（或 block）和 clear: both 缺一不可：

• content: "" 创建伪元素节点，但默认是 inline，无法触发 clear
• display: table 让伪元素成为匿名表格盒子，天然具有 BFC 特性且支持 clear
• clear: both 使该伪元素下移，直到避开所有左侧/右侧浮动元素——这个“下移动作”把父容器底部拉到了浮动元素最底端
• IE6/7 需要 zoom: 1 是为了触发 hasLayout，本质也是模拟 BFC 行为

现代项目里其实很少手动清浮了

真正容易被忽略的是：清除浮动这个动作本身，正在快速退出主流开发实践。

• Flex 布局中，子项设 float 会被忽略，clear 无效，overflow 清浮也失去意义
• Grid 布局同理，浮动在 grid 容器内完全失效
• 即便还在用 float 做图文环绕，也只需在文本容器上单独用 clear，不再需要包裹整个浮动结构
• 面试还考，是因为它像一把手术刀——切开就能看到你对 layout engine 的理解深到哪一层

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