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">@@##@@<p>描述文字</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </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 错加在浮动项上白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
