父容器高度塌陷本质是浮动元素脱离文档流致其无法感知子元素，解决需让父容器重新包含浮动子项；首选display: flow-root触发bfc，语义清晰无副作用，兼容主流浏览器。
父容器高度塌陷导致的底部空白，本质是浮动元素脱离文档流，不是“多了一块空白”，而是父容器根本没撑开——解决它得让父容器重新“感知”到子元素存在。
为什么clear: both加在浮动元素自己身上没用
很多人把clear: both写在float: left的元素上，比如：<div style="float:left; clear:both"></div>。这不会撑高父容器，因为clear只影响该元素自身的外边距位置，不参与父容器的高度计算。
-
clear不是“取消浮动”，而是“避开前面浮动元素占据的空间” - 它必须作用在浮动元素的**后续兄弟块级元素**上，比如
<div style="float:left"></div> <div style="clear:both"></div> - 如果这个
clear元素有默认margin或line-height，反而会引入新空白，建议显式设height: 0; font-size: 0; overflow: hidden;
::after伪元素清除法为什么推荐用display: table
常见写法.clearfix::after { content:""; display: block; clear: both; }在某些老浏览器（尤其 IE7/8）下仍可能撑不开父容器，关键缺了触发 BFC 的可靠方式。
-
display: table比display: block更稳：它天然创建 BFC，且不继承父级line-height，避免伪元素自带额外高度 - 漏掉
display属性（只写content: ""）会导致伪元素不参与布局，clear完全失效 - IE8 支持单冒号写法，生产环境建议用
.clearfix:after而非::after - 若需兼容 IE6/7，还得加
*zoom: 1触发 hasLayout
overflow: hidden看似简单，但容易踩哪些坑
给父容器加overflow: hidden确实能“看起来”修复塌陷，原理是触发 BFC，但它不是真正清除浮动，而是绕过问题——副作用很具体。
- 会裁剪所有溢出内容：下拉菜单、
position: absolute超出边界的提示框、box-shadow、负margin拉伸部分全被切掉 - 若父容器本应横向滚动（如轮播图容器），
overflow: hidden直接禁用滚动 - 在 IE6/7 中，仅靠
overflow: hidden不够，必须配合*zoom: 1才能生效 - 它对
transform或filter产生的视觉溢出也无能为力
现代项目里display: flow-root怎么用才安全
display: flow-root是专为解决这类问题设计的 CSS 属性，语义清晰、一行代码、无副作用，但兼容性需确认。
- 直接给父容器设
display: flow-root，无需伪元素、无需额外 class，也不影响子元素定位参考系 - Chrome 64+、Firefox 58+、Safari 12.1+、Edge 79+ 均支持；不支持的旧浏览器（如 IE）会回退到默认
display: block，此时必须降级用clearfix - 它不会像
overflow: hidden那样隐藏阴影或绝对定位元素，也不会干扰滚动行为 - 别在 Flex 或 Grid 容器里滥用
float再试图清浮动——float在这些上下文中本就不该起作用
真正难的不是选哪个清除方法，而是判断“这里是否真该用float”。图文环绕场景下float依然合理；但做三栏布局时，如果父容器没设宽、又没清除，塌陷就会悄无声息地破坏整个节奏——而这种错位，在没有背景色或边框的页面里，往往要等上线后才被发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
