因为浮动元素会脱离文档流，父容器高度塌陷，而 ::after 能在父元素末尾插入一个「看不见但有布局作用」的伪元素，配合 display: table 或 clear: both 触发 BFC，强制撑开父容器。
css字体加载慢怎么办_font-face懒加载与font-display说明
字体加载慢的根源是浏览器默认阻…
display
精选推荐
最新动态
css 伪元素 ::after 常见用途_清除浮动与内容扩展技巧
html4和html5对浏览器要求一样吗_老浏览器支持html5吗【解答】
HTML4 能在 IE6+、Firefox 2+、Chrome 早期版等几乎一切“能叫浏览器”的环境里跑起来；HTML5 则明确要求现代解析能力——IE9 是分水岭，IE8 及以下基本不认 article、section、video 等语义标签，连 document.querySelector 都可能报错。
css图片和文字浮动错位怎么办_用float结合vertical-align微调
图片和文字使用 float 出现错位时，主要是因为默认的基线对齐方式和浮动元素的块级特性导致垂直方向没有对齐。虽然 float 本身不支持直接的垂直居中控制，但结合 vertical-align 和一些布局技巧可以有效微调对齐效果。
css 布局嵌套太深怎么优化_简化 css 布局层级结构
嵌套过深（比如 .container .sidebar .content .item .title）会导致样式耦合强、复用性差、调试困难，而且一旦 DOM 结构微调，样式就可能失效。更关键的是，这类选择器优先级高但可维护性极低，团队协作时新人根本不敢动。
css 手机端字体太小看不清怎么办_利用媒体查询调整字体大小
手机端字体太小，根本不是“调大一点就行”的问题，而是默认 font-size 没适配屏幕密度、视口宽度和用户阅读距离。直接写 font-size: 16px 在 iPhone SE 屏上可能发虚，在折叠屏上又显得局促——得用可伸缩的基准 + 分段控制。
css透明效果影响性能吗_合理使用rgba避免层级透明
CSS透明效果本身对性能影响很小，但不当使用（比如在大量元素或频繁重绘区域滥用 opacity）可能触发额外的合成层、降低渲染效率。相比 opacity，用 rgba() 设置颜色透明度更轻量——它只作用于单个属性，不强制整个元素及其子树变为透明图层。
css 页面布局一改就乱怎么办_使用固定容器宽度控制布局
根本原因不是样式写错了，而是没锚定布局的“主干”。CSS 布局一旦依赖多层嵌套的相对单位（比如 %、em）或浮动/绝对定位，局部改动就会像推倒多米诺骨牌一样波及全局。最直接的解法是用固定宽度容器切断这种传导链。
css flex 布局中多行内容对齐异常怎么办_使用 align content 控制多行
align-content 只对 多行 flex 容器 生效，且容器必须设置 flex-wrap: wrap（或 wrap-reverse）。如果子项没换行、或者容器是单行（flex-wrap: nowrap），align-content 完全被忽略，此时修改它没有任何视觉变化。
html5如何检测浏览器兼容性_特性支持检测方法汇总【方法】
如果你需要同时检测多个 HTML5/CSS3 特性（比如 localStorage、flexbox、canvas、webp），Modernizr 仍是目前最成熟的方案。它会在 元素上添加类名（如 no-flexbox 或 webp），也暴露全局 Modernizr 对象供 JS 判断。
如何实现点击下拉按钮时关闭其他下拉菜单并切换当前菜单显隐状态
本文介绍一种基于 css 类控制的健壮下拉菜单交互方案：通过为父容器添加 `is-active` 类统一管理显隐逻辑，避免 dom 操作混乱，同时支持样式扩展与多级联动。