清除浮动本质是解决父容器因子元素脱离文档流导致的高度塌陷问题；clear: both不能加在父容器上因其只作用于紧邻的前一个浮动兄弟元素；overflow:hidden通过触发BFC包含浮动子元素但有裁剪或滚动副作用；伪元素::after法（display:table+clear:both）最通用安全；Flex/Grid布局下float失效，无需清除。
浮动元素脱离文档流后，父容器高度塌陷——这是清除浮动要解决的唯一问题。所有方法本质上都是让父容器重新“感知”到浮动子元素的存在。
为什么 clear: both 不能直接加在父容器上
clear 属性只对自身生效，且仅作用于**紧邻的前一个浮动兄弟元素**；父容器本身没参与浮动，加 clear: both 完全无效。常见错误是写成：
.parent { clear: both; }
这不会让父容器包住子浮动元素，只是试图“清除”它前面可能存在的浮动兄弟（通常并不存在）。
overflow: hidden 的副作用和适用边界
设置 overflow: hidden（或 auto、scroll）会触发 BFC，使父容器包含浮动子元素。但它不是“清除”，而是“重构包含关系”。要注意：
- 内容溢出时会被裁剪（
hidden）或出现滚动条（auto），影响可访问性和交互 - 配合
position: absolute或transform的子元素可能被意外截断 - 在移动端，
overflow: auto可能导致 iOS 上弹性滚动失效
适合内容高度可控、无溢出风险的简单布局，比如导航栏、卡片列表头。
伪元素 ::after 清除法（推荐标准写法）
这是目前最通用、副作用最小的方案，核心是用伪元素生成一个“清浮动”的块级占位符：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
.clearfix::after {<br> content: "";<br> display: table;<br> clear: both;<br>}
关键点：
-
content: ""必须存在，否则伪元素不渲染 -
display: table比block更安全：避免 margin 合并，且兼容 IE8+ - 必须加在父容器上：
- IE6/7 需额外加
*zoom: 1触发 hasLayout（如需支持）
Flex / Grid 布局下根本不需要清除浮动
一旦父容器设为 display: flex 或 display: grid，子元素自动脱离传统文档流规则，浮动属性（float）对其完全失效——浏览器会忽略 float 声明。
所以：如果用 Flex 布局实现两栏，再给子项加 float: left，不仅多余，还可能引发意料外的渲染冲突。现代项目中，优先用 Flex/Grid 替代浮动布局，从源头规避清除问题。
真正容易被忽略的是：很多团队还在混合使用浮动与 Flex，比如用浮动做文字环绕、同时用 Flex 做整体结构——这时清除逻辑只对浮动部分有效，别误以为加个 clearfix 就万事大吉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
