clear属性不生效是因为它只对自身所在块级盒且为浮动元素后续兄弟元素才起作用；若父容器无非浮动兄弟元素或错误写在父容器上，则失效；现代推荐用.clearfix::after{content:"";display:table;clear:both}清除，而flex/grid布局下无需clearfix。
clear 属性为什么有时不生效
直接在浮动元素后面加 clear: both 看似合理，但实际常失效——因为 clear 只对「自身所在的块级盒」起作用，且要求该元素必须是浮动元素的「后续兄弟元素」。如果父容器内部只有浮动子项，而你没放任何兄弟元素（比如空 <div></div>），那 clear 就无处安放。
常见错误写法：
<div class="container"> <div class="float-left">左</div> <div class="float-right">右</div> <!-- 这里没加 clear 元素 --> </div>此时
.container 高度塌陷，即使你在 CSS 里给它加 clear: both 也没用——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 容器中基本失效），父容器自然能正确包裹高度。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 浮动元素在 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。
