浮动布局通过float属性实现元素脱离文档流并左右排列，常用于文字环绕、多列布局等场景；当子元素浮动时会导致父容器高度塌陷，需通过清除浮动解决。常用方法包括：添加clear:both的空标签（增加DOM负担）、使用::after伪元素清除（推荐，不污染结构）、设置overflow:hidden触发BFC（可能裁剪内容）。建议在旧项目中使用clearfix方案，新项目优先采用Flex或Grid布局。
浮动布局是CSS中一种传统的页面排版方式，虽然现在有Flexbox和Grid等更现代的布局方案，但在维护旧项目或特定场景下，掌握浮动与清除浮动仍然很有必要。
浮动布局的基本原理
通过 float 属性可以让元素脱离正常文档流，向左或向右移动，直到其边缘紧贴父容器或另一个浮动元素的边缘。
常用取值：
- float: left; — 元素向左浮动
- float: right; — 元素向右浮动
- float: none; — 默认值，不浮动
典型应用场景：文字环绕图片、多列布局（如两栏或三栏）、导航菜单对齐等。
立即学习“前端免费学习笔记（深入）”；
浮动带来的问题：父容器高度塌陷
当一个容器内的子元素全部设置为浮动时，父容器无法感知子元素的高度，导致“高度塌陷”——父元素高度变为0，影响后续布局。
例如：
<div style="border: 1px solid #ccc;"><div style="float: left; width: 50%; background: #eee;">左侧内容</div><div style="float: right; width: 50%; background: #ddd;">右侧内容</div></div><!-- 外层div实际高度可能为0 -->
此时外层容器无法包裹浮动子元素，背景、边框等样式表现异常。
清除浮动的常用方法
为解决高度塌陷问题，需要使用“清除浮动”技术，使父容器正确包含浮动元素。
1. 使用 clear 属性 + 额外标签
在最后一个浮动元素后添加一个空元素，并设置 clear: both;
<div class="container"> <div class="box" style="float: left;">Box 1</div> <div class="box" style="float: right;">Box 2</div> <div style="clear: both;"></div> </div>
优点：兼容性好；缺点：增加无意义的DOM节点。
2. 使用伪元素清除浮动（推荐）
通过 ::after 伪元素在容器末尾插入一个隐藏的块级元素并清除浮动，避免额外标签。
.clearfix::after {
content: "";
display: block;
clear: both;
}
给需要包含浮动的父元素加上这个类即可：
<div class="clearfix"> <div style="float: left;">内容左</div> <div style="float: right;">内容右</div> </div>
这是最常用的现代写法，语义清晰且不污染HTML结构。
3. 使用 overflow 触发BFC
将父元素设置为 overflow: hidden 或 auto 可触发BFC（块级格式化上下文），从而包含内部浮动元素。
.container {
overflow: hidden;
}
注意：如果子元素有超出容器的内容（如弹出菜单），可能会被裁剪。
总结与建议
浮动布局虽已逐渐被Flex和Grid取代，但理解其机制有助于处理老项目中的布局问题。清除浮动的核心是让父容器能正确包裹浮动子元素。
推荐做法：
- 使用 .clearfix 伪元素方案作为标准清除方式
- 避免滥用 overflow: hidden，防止意外裁剪
- 新项目优先考虑 display: flex 或 grid 布局
基本上就这些，不复杂但容易忽略细节。掌握清楚浮动，能有效避免布局错乱问题。
