浮动布局通过float属性实现元素左或右排列，常用于文字环绕和多栏布局，需配合清除浮动避免高度塌陷，但因维护难、响应式差，现多被Flexbox和Grid取代。
浮动布局是CSS中一种传统的页面排版方式，主要通过float属性控制元素在父容器中向左或向右“漂浮”，实现文字环绕图片、多栏并列等效果。虽然现代布局更多使用Flexbox和Grid，但理解float仍有助于维护旧项目或应对特定场景。
1. float属性的基本用法
float 属性有四个常用值：left、right、none（默认）和 inherit。
- float: left;：元素靠父容器左侧排列，其他内容环绕其右侧。
- float: right;：元素靠父容器右侧排列，其他内容环绕其左侧。
- float: none;：不浮动，元素正常文档流中显示。
示例：
<div style="float: left; width: 200px; background: #ddd; padding: 10px;"> 左侧浮动块 </div> <p>这段文字会环绕在浮动块的右侧。</p>
2. 使用浮动创建多列布局
通过为多个块级元素设置float: left 或 float: right，可以实现两栏、三栏等布局。
立即学习“前端免费学习笔记（深入）”；
常见结构：左侧固定宽度导航栏 + 右侧内容区
<div style="width: 100%;">
<div style="float: left; width: 200px; background: #ccc; padding: 10px;">
导航菜单
</div>
<div style="margin-left: 220px; padding: 10px;">
主要内容区域，通过margin留出左侧空间。
</div>
</div>
注意右侧内容使用margin-left避开左侧浮动元素，防止重叠。
3. 清除浮动的影响（清除浮动）
浮动元素脱离正常文档流，可能导致父容器高度塌陷（无法包裹子元素），需手动清除浮动。
常用方法：
- 使用 clear 属性：添加一个空元素并设置 clear: both;
- overflow 方法：给父容器设置 overflow: hidden; 或 auto，触发BFC（块级格式化上下文）
- clearfix 技巧：推荐方式，兼容性好
clearfix 示例：
<style>
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
<div class="clearfix" style="background: #eee;">
<div style="float: left;">左侧</div>
<div style="float: right;">右侧</div>
</div>
4. 浮动布局的局限性
尽管float曾广泛用于网页布局，但它本质是为图文环绕设计的，用于布局存在一些问题：
- 需要手动清除浮动，否则影响后续元素。
- 响应式调整复杂，难以实现垂直居中等操作。
- 维护成本高，代码容易混乱。
现代开发建议使用 Flexbox 或 CSS Grid 替代浮动做整体布局，仅在特殊需求时使用float。
基本上就这些。掌握float原理有助于理解CSS布局演变，但在新项目中优先考虑更强大的现代布局方案。
