clear属性不能直接解决父容器塌陷，而是通过让后续块级元素避开浮动边界下移，间接使父容器获得可测量高度；现代推荐用BFC（如overflow:hidden、display:flow-root）或flex/grid布局来根本解决。
clear属性为什么能解决浮动导致的父容器塌陷
当子元素使用 Float 后，它会脱离文档流，父容器无法感知其高度，从而出现“塌陷”——背景、边框消失，后续元素上移。而 clear 本身并不清除浮动，而是强制元素**避开前面浮动元素的边界**，常被用在浮动元素之后的兄弟元素上，使其“下移”到浮动区域下方，间接让父容器重新获得可测量的内容高度。
clear常用的取值和对应行为
clear 只对块级元素生效，常见值有：
-
clear: left：元素的左边不能紧贴任何左浮动元素 -
clear: right：元素的右边不能紧贴任何右浮动元素 -
clear: both：左右两边都避开浮动元素（最常用） -
clear: none：默认值，不避开任何浮动
直接加clear的实际写法与典型陷阱
常见做法是在浮动元素后插入一个空
并设置
clear: both：
左浮 右浮 但这个方案的问题是：污染 html 结构，且空标签无语义；更隐蔽的坑是：如果父容器本身设置了 height 或 min-height，clear 元素可能被截断，导致视觉上仍像没清掉。
立即学习“前端免费学习笔记（深入）”；
现代更稳妥的替代方案（不依赖clear）
真正解决父容器塌陷，推荐用触发 BFC 的方式，比 clear 更干净：
- 给父容器设置
overflow: hidden（或auto），但注意可能意外裁剪阴影或定位元素 - 用
display: flow-root（chrome 64+/firefox 62+ 支持，语义清晰、无副作用） - Flex 或 Grid 容器天然不塌陷，把父容器设为
display: flex即可
如果必须兼容 IE8–9，才退回到 clear + 空标签或伪元素方案（如 ::after { content: ""; display: table; clear: both; }）。别忘了，clear 是“绕开”，不是“修复”浮动本身——真正要控制布局，优先考虑是否还能不用浮动。