表格内用float出问题，是因为td/th默认为table-cell，不创建bfc且不响应float，导致子元素浮动后父单元格高度塌陷、文字错位、边框断裂；clear对td无效，伪元素清除需display:table才生效，推荐改用inline-block或flex布局。
为什么表格里用 float 会出问题
表格（<table>）本身是严格遵循文档流的块级结构，内部的 <code><td>、<code><th> 默认是 <code>display: table-cell，不响应 float。一旦你在 <td> 里塞一个 <code>float: left 的子元素（比如图片或按钮），它就会脱离该单元格的行内布局上下文，导致父 <td> 高度塌陷、文字错位、边框断裂，甚至整行错行。
<p>这不是 bug，是 CSS 规范行为：浮动只在块级格式化上下文中生效，而 <code>table-cell 不创建 BFC，也不参与常规块流，所以 clear 对它基本无效。
-
clear: both加在<td> 自身没用——它不是浮动元素，只是容器 <li> <code>clear: both加在浮动子元素后面，但若后面没兄弟元素（比如只有一个<img>），就无处可加 -
overflow: hidden设在<td> 上可能触发 BFC，但 IE/Edge 旧版本不支持，且会裁剪 <code>position: absolute子元素clearfix在<td> 里怎么写才生效 <p>伪元素法仍是首选，但必须确保伪元素能参与布局——<code>display: table比block更可靠，尤其在table-cell环境中。直接给
<td> 加类即可，无需改 HTML 结构： <pre class="brush:php;toolbar:false;">.td-clearfix::after { content: ""; display: table; clear: both; }</pre> <p>关键点：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>必须用 <code>display: table（不是block），否则在table-cell中伪元素不占空间，clear失效 - 不能省略
content: ""，否则伪元素不生成 - IE8+ 支持单冒号写法
:after，生产环境建议用:after而非::after - 如果
<td> 有 <code>vertical-align: top/middle/bottom，伪元素默认按 baseline 对齐，可能引入额外空白；加font-size: 0或line-height: 0可规避替代方案：不用
float，改用display: inline-block或flex表格单元格里排图标+文字，
float本就不是最优解。更稳妥的做法是放弃浮动，改用原生支持的排列方式：-
display: inline-block：在<td> 内部对子元素设 <code>vertical-align: middle+inline-block，兼容性好（IE8+），无塌陷风险 -
display: flex：给<td> 设 <code>display: flex; align-items: center;，一行搞定居中与顺序，但需注意 Safari 旧版对table-cell的flex支持不稳定 - 真正现代做法：把整个表格逻辑重构为
div+display: grid或flex，彻底绕开table的限制
例如：
<td><div class="icon-text"> <span class="icon"></span><span>编辑</span> </div></td>，再配.icon-text { display: flex; align-items: center; gap: 4px; }，干净、可控、无清除烦恼。display: flow-root在表格中能不能用不能。虽然
display: flow-root是专为包裹浮动设计的新值，语义清晰、副作用为零，但它**不被<td>、<code><th> 元素支持**——这些元素的 <code>display值被浏览器强制约束为table-cell，任何显式设置都会被忽略（查 caniuse 可确认：flow-root仅适用于块级容器，如<div>、<code><section></section>）。强行写
<td style="display: flow-root">，实际渲染仍是 <code>table-cell，毫无效果。这点容易被忽略，尤其当开发者刚习惯在普通 div 上用flow-root后想“复用”到表格里。真正要解决表格内浮动问题，要么换布局方式（
inline-block/flex），要么老实用clearfix+display: table伪元素——别指望flow-root或overflow在单元格里“一键治愈”。 -
