跳转到主内容
极星编程网：以代码为星，赴技术山海！
📁 网站地图

为什么CSS浮动元素会影响后面非浮动元素的背景_设置clear清理

苏承栈
苏承栈
• 👁 0人浏览过
clear本身不撑高父容器，真正起作用的是加在浮动元素后的块级清除元素（如
），它参与文档流并贡献高度，使父容器获得可绘制高度，背景才得以显示。
clear
本身不会影响背景，它只控制元素在浮动元素之后的定位位置；真正让背景“回来”的，是
clear
强制插入的那个参与文档流的块级元素，间接撑开了父容器高度。 clear: both 必须加在非浮动元素上才有效 常见错误是把
clear: both
加在浮动元素自己身上，或者加在父容器上——这两者都无效。因为：
clear
是给「仍处于文档流中的块级元素」用的，浮动元素已脱离流，
clear
对它没意义 父容器若没内容撑高，加
clear
也无处生效；它不触发 BFC，也不参与高度计算 真正起作用的是：在最后一个浮动子元素后面，放一个
display: block
且带
clear: both
的元素（比如
），它会强制下移、占据新行，并把父容器底部拉下来 为什么加了 clear 后父容器背景就显示了 这不是
clear
“修复”了背景，而是它引入了一个新的、有高度的文档流元素，让父容器终于能算出自身高度了。关键点： 浏览器渲染背景的前提是父容器有「可绘制的高度」，而这个高度必须来自文档流内的内容 那个
clear: both
的元素虽然视觉上可能“空”，但它默认是
display: block
，有行盒（line box）和高度（哪怕只有
line-height
贡献的几像素） 只要父容器内有一个非浮动、非空、参与高度计算的元素，它的
height
就不再为
0px
，background-color / background-image 就能正常绘制 现代项目里别靠 clear 撑高父容器 用
clear
配合空标签或伪元素来“骗”高度，本质是补丁式写法。容易踩的坑包括： 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 立即学习 “ 前端免费学习笔记（深入） ”； 如果清除元素被设为
display: none
或
visibility: hidden
，高度立刻消失，背景又没了 伪元素用
display: table
虽然可靠，但在某些老版 Safari 中可能引发重绘异常 响应式场景下，清除元素的位置可能随断点变化而错位，导致清除失效 更根本的问题：你本不该依赖浮动做整体布局 ——
display: flex
或
display: grid
下，父容器天然包含子项，
clear
完全无用武之地 真正要盯住的，是父容器 computed height 是否为
0px
。只要它是 0，不管 background 写得多对，都看不见——这不是样式问题，是渲染前提缺失。

相关文章