float:left使元素脱离文档流，父容器高度坍缩，后续非浮动元素无视浮动块而上移；clear需加在受浮动影响的后续元素上，如clear:both；现代方案优先用BFC（overflow:hidden）、Flex或Grid布局。
float:left 为什么会让后面的元素“塌陷”上去
因为 float 会让元素脱离普通文档流，父容器无法感知浮动子元素的高度，导致父容器高度坍缩；而后续的非浮动块级元素会无视这个“看不见”的浮动块，从它原本的垂直位置开始布局，看起来就像重叠或上移了。
常见现象是：一个 div 里有左浮动的图片和一段文字，下面紧接着另一个 div，结果它直接贴着浮动图片底部出现，而不是等上面整个区域结束再换行。
clear 属性怎么用才真正起效
clear 不是加在浮动元素自己身上，而是加在「想避开浮动影响」的那个后续元素上。它强制该元素的上边界不与指定方向（left / right / both）的浮动元素对齐。
- 写成
clear: left表示“我不允许左边有任何浮动元素跟我同一水平线” - 如果同时有
float: left和float: right，必须用clear: both才能完全避开 - 只加
clear: left对右浮动无效，反之亦然
示例：
<div class="box"><img src="a.jpg" style="float: left;"><p>描述文字</p></div><br><div style="clear: both;">这里是下一层内容</div>
立即学习“前端免费学习笔记（深入）”；
比 clear 更现代、更可靠的替代方案
用 clear 容易漏加、难维护，尤其嵌套深时。推荐优先考虑：
-
overflow: hidden或overflow: auto加在浮动元素的父容器上（触发 BFC，自动包含浮动子元素） - CSS Grid 布局中直接用
display: grid+grid-template-columns，彻底绕过 float - Flex 布局中用
display: flex，子项默认不换行，无需 float 和 clear
注意：overflow: hidden 在父容器有阴影、圆角或需要滚动时可能意外裁剪内容，此时 overflow: auto 更安全。
清除浮动但不想影响布局的隐藏技巧
有些老项目必须保留 float 结构，又怕漏写 clear。可以用伪元素做“隐形清浮”：
.clearfix::after {<br> content: "";<br> display: table;<br> clear: both;<br>}
然后给浮动元素的父容器加上 class="clearfix"。这个方法不新增 DOM 节点，也不改变原有样式逻辑，但要注意：
-
display: table是关键，不能写成block（否则clear失效） - IE6/7 需要额外加
*zoom: 1触发 hasLayout - 如果父容器本身设置了
height或min-height，这个伪元素可能被截断，清浮失败
真正容易被忽略的是：clear 的作用对象永远是「当前元素自身」，不是它前面那个浮动元素——理解这点，才能不把 clear 错加在浮动项上白忙活。
