CSS浮动元素如何影响父元素高度脱离文档流？

本文共计898个文字，预计阅读时间需要4分钟。

因为使用 `float` 会让元素完全脱离普通文档流，所以在计算容器高度时，父容器在计算高度时看不见它——并不是隐藏起来，而是根本未参与布局计算。

常见错误现象：div 包着几个 float: left 的子块，结果父 div 高度为 0，背景色、边框全没了，下面的元素直接顶上来。

• 这不是浏览器 bug，是 CSS2.1 明确定义的行为
• 即使子元素有明确高度，只要浮动了，父容器仍按“内部无内容”处理
• position: absolute 也有类似效果，但机制不同，别混用

清除浮动的三种可靠方式及适用场景

目标就一个：让父容器重新“感知”浮动子元素的高度。别信“加个 clear: both 就行”，得看加在哪、怎么加。