CSS清除浮动后父元素高度计算方式是怎样的？-css教程-PHP中文网

父元素高度能包含浮动子元素是因为清除浮动或触发bfc使父元素重新计算布局：伪元素clear:both撑高、overflow触发bfc、flow-root显式创建bfc；不同方式对高度影响各异，关键在于是否形成包含上下文。

css清除浮动后父元素高度计算方式是怎样的？

父元素高度会重新包含所有浮动子元素的几何边界（包括 margin、border、padding 和 content），前提是浮动已被真正清除或 BFC 已被触发。

为什么清除浮动后父元素能“看到”子元素高度

浮动元素脱离标准文档流，导致父元素在计算 height 时忽略它们。清除浮动本身不恢复文档流，而是通过以下机制让父元素重新参与布局计算：

::after 伪元素 + clear: both：在父元素末尾插入一个“视觉锚点”，强制该锚点必须位于所有浮动元素下方，从而撑开父容器高度
overflow: hidden 或 auto：触发 BFC，BFC 内部的浮动元素会被包含在块级格式化上下文中，父元素据此计算高度
display: flow-root：显式创建新的 BFC，且不附带 overflow 的裁剪副作用，高度计算逻辑与普通块容器一致

不同清除方式对 height 计算的实际影响

不是所有“清除”都等价，有些只是视觉上撑开，有些才真正参与 layout flow：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

height: 0; clear: both 的空 div：确实撑高，但它是独立的块级元素，父元素高度 = 浮动子元素最大 bottom 边缘 + 空 div 的 margin-top（可能引入意外间距）
::after 伪元素设为 display: block：无额外 margin，高度严格等于浮动子元素的 bottom 最大值，最接近理想行为
overflow: hidden：父元素高度 = 所有内容（含浮动）的包围盒，但若子元素溢出（如 tooltip、drop-down），会被裁剪——此时 height 虽正确，但内容不可见
display: flow-root：现代标准做法，高度计算完全等同于普通块容器，且不裁剪、不干扰定位上下文

容易被忽略的细节：margin 折叠和 border-box

即使清除了浮动，父元素最终高度还受以下因素干扰：

浮动子元素的 margin-bottom 不会与父元素 margin 折叠（因为已脱离文档流），但 ::after 伪元素的 margin 仍可能折叠——建议始终设 margin: 0 避免意外
如果父元素用了 box-sizing: border-box，其 height 包含 padding 和 border；而浮动子元素的 height 计算默认基于 content-box，需注意对齐预期
IE6–8 不支持 ::after 或 flow-root，若需兼容，zoom: 1（触发 hasLayout）+ ::after 是更稳妥组合