空标签清除浮动是指在浮动元素末尾插入一个无内容的块级标签（如），利用其clear:both强制换行并撑开父容器高度，从而解决父容器塌陷问题；该方法直观兼容性好但污染html结构，现代开发更推荐伪元素或display:flow-root等语义化方案。
什么是空标签清除浮动
空标签清除浮动，本质是用一个不包含内容的元素（比如 <div></div> 或 <br>）插入到浮动元素之后，再通过 CSS 设置其 clear 属性，强制它“避开”浮动区域，从而撑开父容器高度。这不是现代推荐方案，但老项目或简单场景里仍常见。
为什么 <div style="clear:both"></div> 能起作用
浮动元素会脱离文档流，导致父容器无法自动包裹它们，高度塌陷。插入一个带 clear: both 的空 <div> 后：
<ul>
<li>该元素会强制换行，出现在所有左/右浮动元素下方</li>
<li>它本身虽无内容，但作为块级元素仍占据空间，把父容器底部“顶”下来</li>
<li>浏览器据此重新计算父容器高度，视觉上就“清除”了塌陷</li>
</ul>
<h3>常见写法与关键细节
</h3>
<p>最简写法是：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><div class="clearfix">
<div style="float:left">左浮</div>
<div style="float:right">右浮</div>
<div style="clear:both"></div>
</div></pre>但要注意：
<ul><li><code><div> 必须放在所有浮动子元素的末尾，顺序错就无效
<li>不能用 <code><span></span> 替代——它是行内元素，默认不响应 clear
<br clear="both"> 在 HTML4 中可用，但已废弃，HTML5 不再支持该属性，应避免height 或 overflow: hidden，空标签可能被裁剪或失效比空标签更稳妥的替代方案
空标签需要额外 DOM 节点，语义弱，维护成本高。实际开发中优先考虑：
- CSS 的
::after伪元素（即 BFC 清除法）：.clearfix::after { content:""; display:table; clear:both; } - 给父容器设置
overflow: auto或overflow: hidden（注意可能意外隐藏溢出内容） - 使用
display: flow-root（现代浏览器支持良好，无副作用，推荐）
空标签不是不能用，而是容易漏掉闭合、误放位置，或在 Flex/Grid 布局中完全失效——只要父容器没启用 BFC，它才可能“管用”。
