浮动元素脱离文档流导致line-height失效，因其不参与行内格式化上下文；替代方案为flex或grid布局，兼容旧浏览器时可用clear或伪元素清浮动。

浮动元素脱离文档流，line-height 失去作用对象

表格单元格（ 或 ）的行高默认由内容撑开，而 line-height 仅对「行内级盒子」或「文本节点」生效。一旦内部子元素设置 float: left 或 float: right，它就脱离了正常的行内格式化上下文（IFC），不再参与行高计算——浏览器会把它当作“悬浮物”，忽略其对 line-height、vertical-align 和基线对齐的影响。

常见现象：单元格视觉上“空”或“塌陷”，文字紧贴顶部，line-height: 40px 看不出效果；用开发者工具检查发现 computed height 远小于预期。

• float 元素不占据 BFC 内的行盒（line box），所以 line-height 没有可作用的“行”
• 即使父 设置了 line-height，只要内容是浮动的，该值不会传导或触发重排
• 若单元格内只有浮动元素且无其他非浮动内容（如空格、 、文本），高度可能退化为 0 或仅由 padding 维持

替代方案：用 display: flex 或 display: grid 替代浮动

在表格单元格中实现左/右对齐布局，浮动不是唯一解，反而破坏语义和渲染逻辑。现代 CSS 提供更可控的方式：

• 给 设置 display: flex; align-items: center;，再用 margin-left: auto 推右浮动元素
• 用 display: grid; grid-template-columns: 1fr auto; 配合 justify-content: space-between
• 避免对 自身设 float —— 表格单元格本就不该浮动，CSS 规范中 float 在表格相关 display 值（如 table-cell）上行为未定义

  示例：

  <td style="display: flex; align-items: center; justify-content: space-between;">
    <span>标题</span>
    <button style="margin-left: auto;">操作</button>
  </td>

  兼容性兜底时，clear + 伪元素比单纯浮动更可靠

  如果必须支持 IE8–9 或遗留系统，无法用 Flex，则需手动“撑开”行高：

  

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

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

  下载
  • 在浮动元素后加一个
    ，强制创建新的块格式化上下文（BFC）来包裹浮动
  • 或用伪元素：

    td::after { content: ""; display: table; clear: both; }

    （注意：需确保 td 是 display: table-cell，该伪元素才有效）
  • 单独设置 min-height 或 height 到 上，绕过 line-height 依赖
  • 慎用 overflow: hidden 清浮动——在 table-cell 中可能导致裁剪或滚动异常

  真正要检查的不是浮动，而是单元格的 vertical-align 和 box-sizing

  很多“行高失效”的问题其实和浮动无关，而是被掩盖的配置冲突：

  • 默认 vertical-align: middle，但若父 或祖先设了 line-height: 0，会导致所有单元格基线错乱
  • box-sizing: border-box 对 padding 的影响常被低估：当 padding-top/bottom 较大时，line-height 看似无效，实则是高度已被 padding 占满
  • 字体本身无降部（descender）或使用图标字体时，line-height 计算出的行盒可能视觉不可见——可用 background 临时着色验证

  最简验证法：移除所有浮动，只留纯文本，看 line-height 是否生效；若仍无效，问题一定出在表格结构或继承链上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！