使用 overflow: hidden 触发BFC可解决父容器因子元素浮动导致的高度塌陷，使其正确包裹浮动内容。2. clear 属性通过设置 left、right 或 both 防止元素与浮动元素同侧排列，常用于清除浮动影响。3. 在实际布局中，overflow 与 clear 常结合使用，如侧边栏浮动时，主内容区通过 overflow: hidden 形成BFC避免文字环绕并隔离布局影响，后续元素再用 clear:both 确保脱离浮动流。4. 现代推荐做法是使用伪元素 clearfix 方案，即 .clearfix::after { content: ""; display: table; clear: both; }，既清除内部浮动又不影响溢出处理，兼容性与维护性更优。理解BFC机制和文档流是掌握浮动布局的关键。
在CSS浮动布局中，overflow 和 clear 虽然作用机制不同，但在处理浮动带来的布局问题时常常结合使用，主要用于清除浮动影响、防止高度塌陷和控制内容溢出。
1. 使用 overflow 触发BFC解决高度塌陷
当一个容器内部的子元素全部浮动时，父容器会出现高度塌陷（即高度为0），影响后续布局。此时可以通过设置 overflow: hidden 让父元素触发块级格式化上下文（BFC），从而包含浮动子元素。
示例：父容器未清除浮动前：
.container {
background: #f0f0f0;
}
.box {
float: left;
width: 100px;
height: 100px;
background: red;
}
此时 .container 高度可能为0。添加以下样式即可修复：
立即学习“前端免费学习笔记（深入）”；
.container {
overflow: hidden; /* 触发BFC，包含浮动元素 */
}
这样父容器就能正确包裹浮动子元素，避免布局错乱。
2. clear 属性清除浮动影响
clear 用于控制元素自身不能与前面的浮动元素在同一侧。常用于在浮动区域后插入的内容（如文字、分隔线）不被“吸入”到浮动区域中。
常见取值包括：left、right、both
典型用法：
.clearfix {
clear: both;
}
在浮动元素之后添加一个空元素并设置 clear:both，可强制该元素下移至所有浮动元素下方。
3. overflow 与 clear 的实际结合场景
在某些复杂布局中，仅使用 clear 可能不够灵活，而配合 overflow 可以更有效地控制布局结构。
例如：左侧导航栏浮动，右侧内容区希望自适应且不受浮动干扰。
.sidebar {
float: left;
width: 200px;
}
.main-content {
margin-left: 210px;
overflow: hidden; /* 触发BFC，防止文字环绕浮动元素 */
}
这里 overflow: hidden 不仅防止文字环绕，还使 main-content 形成独立BFC，避免与 sidebar 发生外边距重叠等问题。
如果在 main-content 后面还有元素需要完全脱离前面的浮动影响，可以再加一个 clear 元素：
<footer class="footer" style="clear: both;"> 底部内容 </footer>
4. 推荐的现代清除浮动方法
虽然 overflow 和 clear 有效，但更推荐使用无内容的clearfix方案：
.clearfix::after {
content: "";
display: table;
clear: both;
}
将此类应用到浮动容器上，既能清除内部浮动，又无需依赖 overflow 对溢出的限制，兼容性和可维护性更好。
基本上就这些。合理使用 overflow 和 clear，能有效应对传统浮动布局中的常见问题，关键是理解它们背后的BFC机制和文档流影响。
