1. CSS 浮动布局中的原理与 overflow/clear 的基本关系（从原理到实战）
1-1 浮动的定义与对文档流的影响
在CSS 浮动布局中，使用 float 可以让元素脱离普通文档流，沿着水平方向将自身挤靠在容器的一侧，并让后续的文本环绕在它的周围。这种行为会导致父容器如果只有浮动子元素，往往会出现高度塌陷的问题，需要通过合适的清除方式来保持布局的稳定性。
理解浮动的本质，有助于在后续的布局中正确选择 overflow 与 clear 的组合，以实现自适应的网格和导航结构。
1-2 overflow 在浮动中的作用
给父容器设置overflow属性，可以触发一个新的块格式上下文（BFC），从而让父容器自动包裹其内部的浮动子元素，避免高度塌陷的问题。这是一种简洁且高效的收拢浮动高度的方式，通常用于单纯的浮动场景。
典型做法是对父容器应用 overflow: hidden; 或 overflow: auto;，这两者都能让容器在子元素浮动后正确扩展高度，并且对滚动行为有一定影响。
/* 通过 overflow 触发 BFC，让父盒子包含浮动子元素 */
.container { overflow: hidden; }
1-3 clear 的作用与浮动清除
clear属性用于规定一个元素是否允许在它上方出现浮动元素。当设置 clear: both; 时，新元素将跳到当前左、右浮动元素的下方，从而实现对浮动的“清除”。这在需要在浮动区域之后开始新的布局块时非常有用。
在包含多个浮动列的场景中，使用 clear 可以确保后续内容不被前面的浮动所覆盖，从而维持文档的自然垂直堆叠关系。
/* 清除浮动，确保后续内容从新的一行开始 */
.clearfix { clear: both; }
2. overflow 与 clear 的组合使用场景
2-1 解决父容器高度塌陷的常用做法
在只有浮动子元素的父容器中，常见做法是给父容器添加一个clearfix，以避免高度塌陷。组合使用 overflow 与伪元素清除浮动，可以在保留浮动布局的同时，确保父容器正确撑开。
使用伪元素清除浮动的思路是：在父容器的 ::after 伪元素中创建一个空的清除浮动块，从而达到“包含”浮动子元素的效果。
/* clearfix 方法之一：使用伪元素清除浮动 */
.container:after { content: ""; display: table; clear: both; }
2-2 利用 overflow: hidden/auto 实现自包含布局
将父容器设置 overflow 可以在不引入额外标记的情况下实现自包含，尤其适用于简单的两列或三列浮动布局。这种方式的优点是简单直接，兼容性较好，但在某些情况下可能影响滚动行为。
常见写法是：将容器设为 overflow: hidden;，再根据需要安排子元素的浮动分布。
.container { overflow: hidden; }
.left { float: left; width: 30%; }
.right { float: left; width: 70%; }2-3 实战中的清浮动策略对比
在实际项目中，开发者需要在 overflow、clear、以及 clearfix 之间做取舍。对于需要滚动条的区域，overflow: auto; 可能更合适；而需要严格包裹浮动子元素而不产生滚动的场景，overflow: hidden; + clearfix 是更稳妥的组合。
下面展示一个综合示例，包含导航项的等宽浮动列，以及一个底部清除块，确保布局井然。
/* 综合示例：导航栏浮动 + 内容块清除浮动 */
.nav { overflow: hidden; }
.nav a { float: left; width: 25%; text-align: center; padding: 12px 0; }
.content { padding: 16px; }
3. overflow 与 clear 的组合应用实战
3-1 实战案例：响应式导航条
在响应式布局中，overflow 与 clear 的组合可以实现自适应的水平导航，将多个导航项浮动并在需要时自动换行，同时通过清除浮动确保下面内容的布局稳定。
通过给导航容器添加 overflow: hidden;，并将导航项设为等分浮动，可以保证在不同屏幕宽度下的对齐与分布。
.nav { overflow: hidden; }
.nav a { float: left; width: 25%; padding: 12px 0; text-align: center; }3-2 实战案例：图片网格的自适应行高
图片网格布局常需要等高行和自适应宽度。通过将网格容器设为 overflow: hidden;，再让网格项浮动，可以实现高效的自适应分栏。
在这种场景下，clear: both; 可以用于在特定行结束后明确断行，防止高度错位。
.grid { overflow: hidden; }
.grid-item { float: left; width: 25%; padding: 6px; box-sizing: border-box; }
.grid-item img { width: 100%; height: auto; display: block; }3-3 兼容性处理与降级策略
对于旧浏览器（如 IE6/7 等），单靠 overflow 可能无法达到理想的效果，此时需要更传统的清除浮动办法，例如使用 clearfix 的伪元素实现方式，确保在旧环境下也能保持正确的高度与布局。
在 CSS 规模较大时，统一采用 clearfix 方案可以提升兼容性与可维护性。
/* 兼容 IE8 及以下，使用 clearfix 等技术 */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }