clear属性不能直接用于table标签防止浮动干扰，因其仅对自身生效且要求元素在文档流中；真正有效的是将clear加在紧跟浮动元素后的容器或兄弟元素上。
clear 属性本身不能直接用在 <table> 标签上“防止表格浮动干扰”——因为 clear 是 CSS 属性，不是 HTML 属性；而且它只对设置了 float 的元素生效，作用对象是**自身**，不是它想“防”的那个浮动元素。
为什么 table 元素加 clear:left 通常没用
默认情况下，<table> 是块级元素，不浮动，也不受周围浮动影响（除非被显式设了 float: left）。如果你给 <table> 加 clear: left，它只会告诉浏览器：“我这个表格，不允许左边有浮动元素紧挨着我”，但前提是：它自己得在文档流中、且前面真有左浮动元素，否则毫无表现。
- 如果表格前面没浮动元素，
clear: left完全无感 - 如果表格自己被设了
float: left，那它已脱离文档流，clear对它无效（clear不作用于浮动元素自身） - 如果想让表格“避开”左侧浮动的图片或 div，必须把
clear: left加在**紧跟在浮动元素之后、你想下移的那个元素上**，比如<p>或包装<table>的<div>
真正有效的 clear 使用位置：包裹容器或后续兄弟元素
常见场景是：左侧有个 <img src="..." style="float: left">，后面跟着一段文字和一个表格。你希望表格不和图片并排、而是完整换行显示。
✅ 正确做法是给表格的**父容器**或**紧邻前一个兄弟元素**加 clear: both：
立即学习“前端免费学习笔记（深入）”；
<img src="avatar.jpg" style="float: left; width: 100px;"> <p>这是介绍文字...</p> <div style="clear: both"><table>...</table></div>
- 不要写
<table style="clear: both">—— 表格没浮动，clear不触发计算 - 更推荐用语义化 wrapper：
<section class="content-block"><table>...</table></section>，然后在 CSS 中写.content-block { clear: both; } - 若表格是唯一内容，且需严格撑开父容器，
clear需配合清除浮动（见下一条）
当表格是浮动子元素时：clear 解决的是父容器塌陷，不是“防干扰”
如果表格本身被设为 float: left（比如多列布局），而它的父容器没有高度，问题根源是**浮动导致父容器高度塌陷**，此时 clear 要用在父容器内部的“清除元素”上，而非表格本身。
例如：
<div class="container"> <table style="float: left">...</table> <table style="float: left">...</table> <div style="clear: both"></div> </div>
- 这个空
<div>的clear: both强制它下移到所有浮动表格下方，从而撑开.container高度 - 现代写法更推荐伪元素：
.container::after { content: ""; display: table; clear: both; } - 注意：
clear在这里不是“防止表格浮动干扰”，而是“补救浮动造成的布局断裂”
真正容易被忽略的一点：clear 只在文档流中起作用。一旦你用 Flexbox 或 Grid 布局替代浮动，clear 就完全失效——它不是通用布局修复工具，而是专为 float 场景设计的兼容性补丁。现在多数表格布局问题，其实该优先考虑 display: table 语义化、或用 flex/grid 替代浮动，而不是硬套 clear。
