clear属性用于控制元素在浮动元素旁的布局，其值包括none、left、right和both，用于清除左侧、右侧或两侧浮动影响。常通过添加clear: both的元素避免内容环绕浮动元素，解决布局错位。现代方案推荐使用BFC（如overflow: hidden）或伪元素clearfix法替代传统clear，以更优方式处理浮动清除问题。
clear 属性用于控制元素在浮动元素旁边的位置。当一个元素设置了浮动（float），它会脱离正常的文档流，导致后面的元素可能会上移并围绕它排列。使用 clear 可以让某个元素不与前面的浮动元素并排，而是“清除”浮动，从下一行开始显示。
clear 的取值和作用
clear 有以下几个可选值：
- none：默认值，允许元素两边都可以有浮动元素，不做清除处理。
- left：元素的左边不能有浮动元素，会向下移动直到没有左浮动阻碍。
- right：元素的右边不能有浮动元素，会避开右浮动元素。
- both：元素两边都不能有浮动元素，会同时避开左和右的浮动。
常见使用场景
当多个元素依次浮动时，后续非浮动块可能会被挤上去。例如：
<div style="float: left; width: 100px; height: 100px; background: red;"></div>
<p>这段文字可能会出现在红色方块的右边。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill1462" title="MoltOverflow"><img
src="https://img.php.cn/upload/skill/000/000/081/178823887742941.jpg" alt="MoltOverflow" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill1462" title="MoltOverflow">MoltOverflow</a>
<p>Moltbots问答社区 - 提问编程问题，分享解决方案</p>
</div>
<a href="/xiazai/skill1462" title="MoltOverflow" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<div style="clear: both;"></div>
在需要结束浮动影响的地方添加一个 clear: both 的元素，可以防止内容环绕。这常用于清除父容器中子元素浮动带来的布局问题。
现代替代方案
虽然 clear 仍有效，但现在更推荐使用其他方式清除浮动，比如：
- 给父元素设置 overflow: hidden 或 overflow: auto 来触发 BFC（块级格式化上下文）。
- 使用伪元素清除法：.clearfix::after { content: ""; display: table; clear: both; }。
基本上就这些。clear 是处理浮动布局的基础工具，理解它有助于掌握传统网页布局方式。
