不能直接对浮动div用table-cell，因为float与display:table-cell互斥：float使元素脱离文档流，而table-cell需参与表格上下文的高度计算；浏览器会忽略float元素上的table-cell声明或回退为block。
为什么不能直接对浮动div用 table-cell
浮动（float）和 display: table-cell 是互斥的：一旦元素设置了 float，它会脱离常规文档流，而 table-cell 要求元素必须在同一个表格上下文里参与高度计算。浏览器会忽略 float 元素上的 table-cell 声明，或者强制回退为 display: block —— 所以你看到两个 div 高度不一致，不是样式没生效，是根本没进入 table 布局逻辑。
display: table-cell 必须配合 display: table 父容器
单独给两个 div 加 display: table-cell 不起作用，它们需要被包裹在一个「扮演表格」的父容器里。这个父容器必须显式设置 display: table（或 display: table-row），否则子元素无法形成单元格对齐关系。
- 父容器加
display: table，宽度建议设为width: 100%，避免收缩 - 两个子 div 各自设
display: table-cell，无需浮动、无需清除浮动 - 若需等宽，用
width: 50%；若需内容撑开，可不设 width，但注意table-cell默认有最小宽度（由内容决定） - 慎用
vertical-align：默认是baseline，可能造成视觉错位；统一设为top更可控
兼容性与现代替代方案的取舍
table-cell 在 IE8+ 完全支持，但它的语义是「表格单元格」，用于布局属于 hack。真正的问题在于：它不响应 flex 或 grid 的弹性行为，比如无法用 flex-grow 动态分配剩余空间，也无法用 gap 控制间距。
- 如果项目要支持 IE10 及以下，
table-cell仍是稳妥选择 - 如果只需支持 IE11+ 或现代浏览器，
display: flex更简洁：display: flex在父容器上，子元素自动等高，且支持gap、flex-wrap、对齐控制 - 不要混用：比如父容器用
flex，子元素又加table-cell——后者会被覆盖，且调试时容易误判
常见错误：内容溢出导致高度“失效”
看起来两个 div 高度不一致，往往不是布局没生效，而是其中一个内容超长、换行异常，或内部元素设置了 height / min-height 干扰了自然伸缩。
- 检查子 div 内是否用了
position: absolute或float的后代，它们会脱离高度计算 - 确认没有意外的
overflow: hidden截断内容，导致视觉上“变矮” - 用浏览器开发者工具选中元素，看 computed 样式里
height是否为auto；如果不是，往上查是哪个规则锁死了高度 - 临时加
border: 1px solid red到两个子 div，能立刻暴露真实渲染高度差异
实际最简可用结构就三行关键 CSS：
.container { display: table; width: 100%; }
.left, .right { display: table-cell; vertical-align: top; }
其余都是修饰——边框、内边距、宽度，不影响等高核心逻辑。真正卡住人的，永远是父容器漏写 display: table，或者子元素悄悄被浮动/定位带偏了流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
