背景与问题定义
在 CSS 盒模型下，浮动元素往往会从文档流中脱离，导致父容器的高度无法自动包含子元素的高度，这就会出现“容器撑不开”的现象。此时看起来像容器底部空着一大片，后续的布局会错位，页面美观性下降。理解这一点对于后续选用 clearfix 与 overflow 这两招来解决问题至关重要。
当父级容器没有高度时，内部的浮动元素仍然会占据可用空间，但父容器的高度并不会随之增长，导致外部元素的对齐和包裹性受损。这也是前端布局中常见的坑，尤其在响应式设计和网格系统中尤为明显。
解决这类问题的核心思路是，让父容器显式地“包含”浮动子元素，从而使父容器的高度正确生效。两招就能解决：clearfix 与 overflow，下面分别展开说明。
方案一：使用 clearfix 清除浮动
清除浮动（clearfix）是一种经典的解决方案，原理是通过在父容器尾部插入一个伪元素来“清理”浮动，使父容器的高度自动包含其子元素。该方法兼容性好，且不会改变浮动元素本身的布局特性。
在实现中，通常会给父容器添加一个专门的类名，例如 clearfix，然后通过伪元素实现清除效果。关键点在于 ::after 伪元素的显示为表格或清除浮动，以及父容器本身参与格式化上下文之外的行为。
/* 常见 clearfix 实现方式 */
clearfix::after { content: ""; display: table; clear: both; }
.clearfix { *zoom: 1; } /* IE6/7 兼容写法 */
下面给出一个简单示例，展示在一个父容器内放置两个浮动子元素时，如何通过 clearfix 使父容器撑开。
<div class="container clearfix"><div class="item" style="float:left; width:60px; height:60px; background:#e74c3c"></div><div class="item" style="float:left; width:60px; height:60px; background:#3498db"></div>
</div>在上面的示例中，父容器 .container 通过 clearfix 的清除作用，自动包含两个浮动子元素，不再出现高度塌陷的问题。
方案二：通过 overflow 实现 BFC（块格式化上下文）
通过给父容器设置 overflow，通常可创建一个新的块级格式化上下文（BFC），从而使浮动子元素不会影响父容器的高度。此方法简单直观，适用于多数简单布局场景。
常用做法是对父容器直接应用一个溢出属性，例如 overflow: hidden; 或 overflow: auto; 其中 overflow: hidden 常用于隐藏超出部分，而 overflow: auto 会在需要时出现滚动条。
/* 将父容器建立新的格式化上下文，使其包含浮动子元素 */
.container { overflow: hidden; } /* 也可用 overflow: auto; */
配合浮动子元素的简单示例如下，展示 overflow 如何让父容器撑开：
<div class="container" style="overflow: hidden;"><div class="item" style="float:left; width:100px; height:40px; background:#2ecc71"></div><div class="item" style="float:left; width:150px; height:40px; background:#f1c40f"></div>
</div>要点在于 overflow 的设置能建立 BFC，从而使父容器的高度跟随浮动子元素的高度变化，实现简单且对布局影响较小。
对比与兼容性要点
两种方法各有优缺点，具体选择取决于页面需求和浏览器兼容性。clearfix 通常对老旧浏览器兼容性最好，但CSS 选择器和伪元素的使用需遵循浏览器支持情况；而 overflow 方案实现简单，但在某些复杂布局中可能对滚动行为和内容截断有影响。
在实际开发中，优先考虑 现代浏览器环境时使用 overflow 方案，若需要兼容极早期浏览器，则优先使用 clearfix 并结合现代 CSS 组织代码。
跨浏览器兼容性注意点
IE6/IE7 时代的浮动处理较为特殊，clearfix 的 classic 实现可确保在这些浏览器上的正确显示，而 overflow 的处理在 IE 的早期版本中可能产生一些布局差异，因此需要对老浏览器进行测试。
综合考虑，在现代项目中，结合 CSS 模块化和前缀器工具，能够更稳妥地实现这两招的兼容性，确保浮动元素在不同屏幕和浏览器下都能被父容器正确包含。
