display: table-cell 本身不能清除浮动，它只是恰好绕过浮动影响的布局上下文；真正起作用的是其父级 display: table 容器触发的 bfc 行为，使容器高度正常包裹子元素。

table-cell 本身不能闭合浮动

直接说结论：display: table-cell 不是浮动清除（clear float）的机制，它只是**恰好绕过了浮动影响的布局上下文**，看起来像“闭合”了，其实是脱离了普通流中浮动的干扰范围。真正起作用的是它触发的 BFC（块级格式化上下文）等效行为——但注意，table-cell 本身不创建 BFC，而是其父容器（如 display: table）才创建。

为什么套上 table-cell 后浮动元素不塌陷了？

常见现象：一个浮动的 <div> 后面跟一个 <code>display: table-cell 的盒子，父容器高度没塌陷，于是误以为“闭合”了。真实原因是：

• table-cell 必须放在 display: table 或 display: table-row 容器里才能生效，而 table 容器默认创建 BFC —— BFC 内部的子元素不会和外部浮动发生 margin 折叠，也不会被浮动覆盖或导致父容器塌陷
• 浮动元素仍存在于文档流外，但 table 容器会根据内部所有子元素（包括 table-cell）的尺寸重新计算自身高度，自然就“撑开”了
• 单独给某个元素设 display: table-cell 而不配 table 结构，浏览器会自动补全匿名 box（比如生成匿名 table-row 和 table），间接触发类似效果

比 table-cell 更可靠、更明确的闭合方式有哪些？

依赖 table-cell 清浮动属于副作用利用，语义不清、兼容性隐忧（尤其在 flex/grid 主导的现代布局中），推荐用明确手段：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 对浮动父容器设置 overflow: hidden 或 overflow: auto（触发 BFC）
• 使用伪元素清除法：::after { content: ""; display: table; clear: both; }（经典 clearfix）
• 直接改用 display: flex 或 display: grid 父容器 —— 这两种布局下子项浮动完全失效，无需清除
• 避免浮动布局本身：现代开发中，浮动仅推荐用于文字环绕（float: left/right on <img>），非布局目的慎用

容易被忽略的关键点

很多人调试时发现加了 display: table-cell 就“好了”，却没注意到：

• 该元素的 vertical-align 默认是 middle，可能造成意外的垂直偏移
• 它会丢失 margin（table-cell 的 margin 无效），必须用 padding 或父级 border-spacing 控制间距
• 在 IE8 及以下，table-cell 对匿名 table box 的补全行为不一致，容易出布局断裂
• 如果父容器没有设定宽度，table-cell 可能收缩到内容宽度，和预期“填满”不符