clear: both 是CSS属性值，用于让当前元素下移避开前方浮动元素；clearfix是自定义类名，通过::after伪元素插入clear: both来触发BFC、撑开父容器高度，二者目标不同、不可替代。

clear: both 是属性值，不是类名

很多人搜 clear:fix，其实它根本不存在——CSS 里没有叫 clear:fix 的语法。你看到的 clearfix 是一个**自定义类名**（比如 .clearfix），和 clear 属性本身无关。混淆点就在这里：clear: both 是标准 CSS 属性声明；clearfix 是开发者约定俗成的 class 名，靠内部用 ::after 插入一个 clear: both 的伪元素来起作用。

clear: both 直接作用于当前元素，只解决“自己不下沉”问题

给某个元素写 clear: both，意思是“我这个元素，必须下移到前面所有浮动元素的下方”，但它不修复父容器高度塌陷，也不影响其他兄弟元素的布局逻辑。

• 常见错误现象：在两个浮动的 <div> 后加一个 <code><div style="clear:both"></div>，页脚是下来了，但包裹它们的父容器依然高度为 0
• 适用场景：局部收尾，比如导航栏后加一条分隔线、图文混排后强制换行
• 注意：只对块级元素生效；设在行内元素上无效

clearfix 是父容器上的 class，目标是“撑开父高 + 隔离浮动流”

.clearfix 的核心不是清除某个元素的浮动，而是让**浮动子元素的父容器重新获得高度并包裹住它们**。它靠的是 ::after 伪元素 + clear: both 组合技，本质是“视觉上插入一个清浮动的块”，但不增加 DOM 节点。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 典型写法：.clearfix::after { content: ""; display: table; clear: both; }，再给父容器加 class="clearfix"
• 为什么用 display: table 而不是 block？避免 IE6/7 下 height: 0 + visibility: hidden 引发的边距叠加 bug
• 兼容性补丁 zoom: 1 只需在 IE6–7 环境下加，现代项目可省略

overflow: hidden 也能“清除”，但有隐藏风险

给父容器设 overflow: hidden 或 overflow: auto，会触发 BFC，从而包裹浮动子项、撑开高度。但它不是“清除”，而是绕过浮动影响的副作用。

• 隐患明显：子元素若超出容器（如下拉菜单、tooltip、动画位移），会被直接裁剪
• 比 clearfix 简短，但可控性差；适合静态内容区域，不适合交互组件
• display: flow-root 是更现代的替代方案，效果等同 BFC 且无溢出裁剪，但 IE 完全不支持
真正容易被忽略的点在于：**clear: both 解决的是“后续元素位置”，clearfix 解决的是“父容器高度”，二者目标不同，不能互相替代**。选哪个，得看你要修的是布局断层，还是父盒塌陷。