不能用<table>做T型布局，因其语义错误、响应式崩坏、SEO拒绝、低版本浏览器调试困难；推荐float方案（需清浮动+预留空间）或谨慎使用flex/grid并验证兼容性。
不能用 <table> 做 T 型布局——这不是“能不能写出来”的问题，而是语义错误、响应式崩坏、SEO 拒绝、低版本浏览器调试地狱的综合陷阱。
为什么 <table> 强行撑出 T 型结构会翻车
顶部 + 左栏 + 右栏 的视觉结构，确实能用 <table> 套三层 <tr> 和带 colspan/rowspan 的 <td> 挤出来。但实际项目里你会立刻撞上这些：
-
<table>是为「二维数据表格」设计的，不是容器；W3C 明确反对用它做页面级布局 -
position: sticky在<td>里基本失效，左栏滚动吸顶做不到 -
overflow: auto在单元格内行为不可控，右栏内容溢出时容易错位或截断 - 移动端适配必须靠 JS 拆表或 hack CSS，而原生流式布局（如 float）天然支持媒体查询
-
colspan="2"和rowspan="3"嵌套稍深，DOM 结构一动，整个表格就错行——调试时你得反复数<td>数量
float 实现 T 型布局的关键 CSS 写法
这是目前兼容 IE10+、无 JS 依赖、结构清晰、调试直观的方案。核心不是“怎么浮动”，而是“怎么清浮动+预留空间”：
-
#header和#footer必须加clear: both，否则会被浮动的左栏顶上去 -
#leftnav要设固定宽度（如width: 180px）并float: left；只写float不写width，IE 下可能宽度坍缩 -
#content不能也float，否则父容器高度塌陷；正确做法是margin-left: 180px预留空间，并加overflow: hidden（触发 BFC）或伪元素清浮动 - 若右栏内容过少导致底部上浮，给外层容器加
min-height: 100vh，而不是依赖height: 100%（后者在嵌套中常失效）
示例片段：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
header { clear: both; }
#leftnav { width: 180px; float: left; }
#content { margin-left: 180px; overflow: hidden; }
footer { clear: both; }
现代方案（flex / grid）上线前必须验的兼容点
写起来快，但老系统里一个 display: flex 就可能让整页白屏。关键要查：
- IE10 下
flex: 1完全不生效，必须写成flex: 1 1 auto，且父容器得加display: -ms-flexbox - Chrome 48 之前，
flex-direction: column下子项height: 100%无效，得换min-height - 别指望
align-items: stretch让左右栏等高——如果右栏内部用了float元素，高度照样塌 -
grid-template-areas在 Safari 15.4 之前对min-content/max-content支持不全，左栏菜单展开后可能撑不开
T 型布局真正的复杂点，从来不在“画出三块”，而在左栏菜单动态展开、右栏异步加载、窗口反复缩放时，各区域尺寸与层级是否稳定可控——这些边界场景下，float 方案靠明确的宽高和清浮动反而更可预期，而 flex 或 grid 往往卡在某个浏览器对 fit-content 的实现偏差上。
