浮动元素后出现空白是因为其脱离文档流导致父容器高度塌陷，后续元素从顶部布局；clear需作用于浮动后的块级元素才有效，现代推荐用display: flow-root触发BFC解决。
浮动元素后面为什么会出现空白
这是因为浮动元素脱离了普通文档流，父容器无法自动计算高度，导致后续元素“以为”前面没内容，直接从顶部开始布局，视觉上就出现了奇怪的空白或重叠。
典型表现是：浮动的 比起加空标签或额外元素，直接让父容器形成 BFC 更干净。以下任一方式都能让父容器包含浮动子元素： 立即学习“前端免费学习笔记（深入）”； 例如： 常见原因不是语法写错，而是场景理解偏差： 浮动本身已是过时布局手段，遇到清除问题，优先考虑是否能用 ，结果 跑到了浮动块的右侧甚至上方，或者父容器高度塌陷、背景色/边框消失。
clear 属性怎么用才有效
clear 本身不清理浮动，它只是让当前元素避开指定方向的浮动元素。真正起作用的是在浮动元素之后加一个「清除元素」，或者给父容器设置触发 BFC 的方式。
clear: both;（避开左右两侧浮动）inline 元素无效clear，它对自身不起作用display: flex 或 display: grid，clear 会被忽略更推荐的现代解法：BFC 触发
overflow: hidden;（最常用，但注意会隐藏溢出内容）display: flow-root;（语义清晰、无副作用，推荐优先用）float: left; 或 position: absolute;（会改变父容器定位行为，慎用）.container {
display: flow-root;
}
.container .float-box {
float: left;
}这样父容器就能正确包裹浮动子元素，后续内容自然下移，无需 clear。
为什么有时候 clear 不生效
display: block;（比如默认 inline 的 ）transform、filter 等属性，意外创建了新的层叠上下文，干扰了清除逻辑clear 是否真的生效display: contents; 的父元素，会让子元素脱离 DOM 结构层级，clear 失去参照flex 或 grid 替代——它们天然不存在塌陷问题。
