clear属性不生效是因为它只对自身所在块级盒且为浮动元素后续兄弟元素才起作用；若父容器无非浮动兄弟元素或错误写在父容器上，则失效；现代推荐用.clearfix::after{content:"";display:table;clear:both}清除，而flex/grid布局下无需clearfix。

clear 属性为什么有时不生效

直接在浮动元素后面加 clear: both 看似合理，但实际常失效——因为 clear 只对「自身所在的块级盒」起作用，且要求该元素必须是浮动元素的「后续兄弟元素」。如果父容器内部只有浮动子项，而你没放任何兄弟元素（比如空 ），那 clear 就无处安放。

常见错误写法：

  左
  右
  

• 只对块级元素有效（display: block 或 display: table 等）
• clear: left / right / both 必须作用于紧跟在浮动元素之后的元素
• 若用伪元素模拟清除，需确保该伪元素是块级并触发 BFC

clearfix 的现代写法（推荐使用 ::after）

传统 clearfix 用 :after（单冒号）兼容 IE8，但现在多数项目已放弃 IE8，应改用双冒号 ::after 表示伪元素。关键点不是“有没有 content”，而是：是否生成块级盒、是否设置 clear、是否避免影响布局。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

• content: "" 是必需的，空字符串也行，但不能省略（否则伪元素不渲染）
• display: table 比 block 更稳妥：它自动形成 BFC，且不会意外撑高父容器（block 在某些 font-size 下可能有基线间隙）
• 不用 display: block; height: 0; overflow: hidden —— 后者会裁剪子元素的 box-shadow 和 transform 溢出部分

flex 或 grid 替代浮动后，还需要 clearfix 吗

不需要。一旦父容器设为 display: flex 或 display: grid，子项无论是否浮动，都不再脱离文档流（浮动在 flex/grid 容器中基本失效），父容器自然能正确包裹高度。

• 浮动元素在 flex 容器中会变成「普通 flex item」，float 属性被忽略
• 如果你看到 flex 布局下仍有塌陷，大概率是误用了 float，或父容器没真正启用 flex（比如写了 display: -webkit-flex 却漏了标准声明）
• 过渡期可逐步把 float + clearfix 改成 display: flex; justify-content: space-between 等，更可控

overflow: hidden 算不算清除浮动

它能让父容器包裹浮动子项，但本质不是「清除」，而是通过触发 BFC 来包含浮动，副作用明显：

• 内容溢出会被裁剪（如下拉菜单、tooltip、负 margin 元素）
• 无法与 position: absolute 子元素配合（绝对定位参考的是最近的「非 static 定位祖先」，而 BFC 边界可能干扰定位上下文）
• 滚动条行为异常（比如 overflow: hidden 在 Safari 中可能意外禁用弹性滚动）

所以它只是「看起来像清除了」，不是真正的清除手段，仅适合确定无溢出场景的临时 hack。