CSS伪元素清除浮动为什么没有显示效果-css教程-PHP中文网

伪元素未渲染主因是content缺失或为none，导致盒模型未创建；若渲染但父容器仍塌陷，则需确保content存在、display为table/block、clear作用于正确位置且父容器非bfc。

css伪元素清除浮动为什么没有显示效果

伪元素没渲染，`content` 缺失或为 `none`

伪元素根本不会创建盒模型，如果 content 没写、写成 content: none 或 content: normal，浏览器直接跳过解析——不是“看不见”，是压根没生成节点。

常见误操作：

复制代码时漏掉 content: "" 这一行
用 content: "" 但父元素设了 font-size: 0 且没重置 line-height，导致空盒高度为 0（虽存在，但撑不开）
想用 Unicode 字符却未转义，比如写 content: "→" 而非 content: "\2192"，编码不匹配时可能被忽略

`::after` 默认是 `inline`，`clear: both` 不生效

clear 属性只对参与块格式化上下文（BFC）的块级元素起作用。::after 默认是 display: inline，此时无论写多少 clear: both 都等于没写。

必须显式设置：

display: table（推荐）：自动触发 BFC，无基线间隙，IE8+ 兼容
display: block：可用，但需注意 margin 合并、父容器 overflow: hidden 可能裁剪它
别用 display: flex 或 display: grid：它们会破坏 clear 的行为逻辑，clear: both 直接失效

清除目标错了：把 `clear` 加在浮动元素自己身上

比如写 .item { float: left; clear: both; }，这只会让该元素避开前面所有浮动项，和“撑开父容器”毫无关系。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

clear 必须作用于浮动元素**之后第一个块级兄弟元素**。伪元素 ::after 是插在父元素末尾的，所以它得是这个“兄弟”，而不是浮动子项的兄弟。

验证方法：

打开开发者工具，选中父元素，在 Elements 面板里找 ::after 节点是否真实存在
检查它的 Computed 样式里 display 是否为 table 或 block，clear 是否为 both
若父元素本身已是 BFC（如设了 display: flow-root、overflow: hidden、position: absolute），再加 ::after 就是冗余，还可能干扰布局

父容器高度仍塌陷，其实是伪元素没“撑高”

即使 ::after 渲染出来了，如果它没实际占据空间，父容器还是不会扩展高度。

关键点：

display: table 自带“最小高度”语义，一般能自然撑开；display: block 若父容器有 font-size: 0 或 line-height: 0，可能被压缩到 0 高度
避免给伪元素加 visibility: hidden 或 height: 0——它需要真实参与高度计算
现代项目优先用 display: flow-root：一行解决，不依赖伪元素，也不用纠结 content 和 display 组合