clear: both 对 无效，因其只作用于自身外边距区域且不解决父容器塌陷；应加在 前一个兄弟元素上，或用 display: flow-root 包裹其父容器，现代布局优先使用 flex/grid 替代 float。
clear: both 为什么对 <table> 无效
<p>直接给 <code><table> 元素加 <code>clear: both 多数情况下没用，因为 <table> 默认是块级元素，但它的盒模型行为受 <code>border-collapse、display 和祖先容器影响；更关键的是，clear 只作用于元素自身的外边距区域，不改变父容器高度计算——而表格“紧跟浮动元素”本质是父容器塌陷或文档流错位导致的，不是表格自己没清掉。
真正起作用的位置：必须加在 <table> 的**前一个兄弟元素**上
<p>如果你的 HTML 结构是：<code><div style="float: left">侧栏</div>
<table>...</table>，那么问题不在 <table>，而在它前面没有“阻断浮动流”的节点。正确做法是插入一个块级占位元素，放在浮动元素之后、<code><table> 之前：
<ul>
<li>这个占位元素必须是块级（<code>display: block 或 display: table）
<table> 的**前一个兄弟元素**上
<p>如果你的 HTML 结构是：<code><div style="float: left">侧栏</div>
<table>...</table>，那么问题不在 <table>，而在它前面没有“阻断浮动流”的节点。正确做法是插入一个块级占位元素，放在浮动元素之后、<code><table> 之前：
<ul>
<li>这个占位元素必须是块级（<code>display: block 或 display: table）
clear: both，且不能有内容、默认 margin 或 line-height<div style="clear: both; height: 0; font-size: 0;"></div>
height: 0 和 font-size: 0，否则 IE/旧浏览器可能因行高撑开空白更干净的替代方案：用 display: flow-root 包裹 <table><p>现代写法不用插空标签，直接让 <code><table> 的父容器触发 BFC：
<ul><li>把 <code><table> 套一层 <code><div>，并设 <code>style="display: flow-root;"
display: flow-root 是专为解决此类问题设计的，兼容性查 caniuse —— 2026 年已覆盖所有主流浏览器（Chrome 85+、Firefox 69+、Safari 15.4+、Edge 79+）overflow: hidden 安全：不会意外裁剪溢出内容，也不影响滚动行为<table> 设 <code>display: flow-root，会破坏表格语义和渲染逻辑
根本规避：别用 float 布局表格周边内容
浮动本就不是为复杂布局设计的，尤其搭配 <table> 这种语义强、盒模型特殊的元素时，容易连锁出错：
<ul>
<li>如果只是想实现“左图右表”，改用 <code>display: flex 父容器，子项去掉 float，用 align-items: flex-start 控制对齐
float: left + shape-outside，而非让表格去“清”别人float 仅保留在纯文本混排场景（如 <img> 左浮、文字绕排），其他一律用 Flex 或 Grid真正麻烦的从来不是怎么清，而是为什么还在用 float 去套表格——那个 clear: both 的位置，往往暴露的是布局思路的老化。
