如何通过CSS display:table 清除浮动并兼容旧版浏览器？-css教程-PHP中文网

display:table不能清除浮动，因其不创建bfc，对内部浮动无包裹能力；旧版ie需双伪元素+zoom:1，现代推荐flow-root或flex/grid。

如何通过css display:table 清除浮动并兼容旧版浏览器？

display:table 不能清除浮动，强行用它“清浮”反而会让塌陷更严重——这是个常见误解，得先踩住这个坑。

为什么 `display:table` 根本不清浮动

它只是模拟表格渲染逻辑，不创建 BFC（块级格式化上下文），对内部浮动子元素完全无包裹能力。典型现象是：父容器设了 display:table，里面两个 float:left 的 div，父容器高度直接塌成 0；给这个父容器加 clear:both 也无效，因为 display:table 元素默认不响应 clear。

IE8 及更老浏览器里怎么安全清浮

旧版浏览器（尤其是 IE6/7/8）不支持 display:flow-root，也不能靠 flex 或 grid 绕过浮动。唯一稳妥路径是双伪元素 + hack：

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

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

下载

.clearfix:before, .clearfix:after 必须都写，且 content:"" + display:table 缺一不可
.clearfix:after 单独加 clear:both
IE6/7 需补 *zoom:1 触发 hasLayout；IE8 虽支持 :before/:after，但单写 :after 仍可能失效，所以 :before 不能省
别用 display:block 替代 display:table —— IE8 下偶尔多出 1px 高度或清除失败

`display:table-cell` 里嵌浮动内容怎么办

如果你已用 display:table 布局（比如模拟三栏），又必须在某个 display:table-cell 里放浮动按钮或标签，注意：table-cell 自身不支持 float 和 clear，硬加没用。

首选方案：把该 table-cell 改成 display:flow-root（现代浏览器）或套一层 div，设 display:flow-root / overflow:hidden
兼容 fallback：套的这层 div 加 .clearfix 类，确保 IE8 下也能撑高
绝对不要在 table-cell 上直接写 float 或 clear，CSS 规范明确不支持

混用 `display:table` 和 `overflow:hidden` 的陷阱

有人试过给 display:table 容器加 overflow:hidden 想强制触发 BFC，结果发现 IE8 下失效——因为旧引擎里，display:table 会覆盖 overflow 的 BFC 触发行为。

这不是 bug，是规范实现差异：IE8 认为 table 渲染模型优先级高于 overflow
若你必须保留 display:table 结构，就别指望 overflow:hidden 能清浮，老老实实用 .clearfix
table-layout:fixed + 浮动更危险：列宽会被冻结，浮动元素宽度请求被无视，导致内容挤成一团，这不是清浮问题，是尺寸计算冲突

真正能靠 display 属性原生清浮的只有 display:flow-root、display:block 配 overflow、以及 flex/grid；display:table 系列从设计上就没这职责。兼容旧版时，双伪元素是唯一经得起压测的方案，但前提是每个细节都写对——漏掉 :before、少写 content:""、或误用 display:inline-block，都会让整个清除逻辑静默失效。