浮动布局通过float属性实现元素左右排列和文本环绕，常用于多栏布局；但会导致父容器高度塌陷，需用clear、overflow或BFC等方法清除浮动；典型应用包括两栏和三栏布局，其中三栏需将中间内容置于HTML末尾；由于存在响应式差、结构依赖强等问题，现代开发推荐使用Flexbox和Grid布局替代float，仅在兼容旧项目或特殊排版时保留使用。
浮动布局（float layout）是CSS中一种经典的布局方式，主要用于实现文本环绕图片、多列内容排列等效果。虽然现代开发更多使用Flexbox和Grid布局，但理解float仍然对掌握CSS布局演变和维护旧项目很有帮助。
float属性的基本用法
float属性用于将元素从正常文档流中“浮动”出来，使其向左或右移动，其他内容围绕其排列。
常用取值包括：
- left：元素向左浮动
- right：元素向右浮动
- none：默认值，不浮动
- inherit：继承父元素的浮动设置
.box {
float: left;
width: 200px;
height: 100px;
background: #007acc;
}
这个.box元素会脱离标准流，靠左排列，后续内容会围绕它显示。
立即学习“前端免费学习笔记（深入）”；
浮动带来的影响与清除浮动
当父容器内的子元素全部浮动后，父元素可能无法正确包裹子元素，出现高度塌陷问题。
例如：
.container {
border: 2px solid #333;
}
.item {
float: left;
width: 100px;
height: 100px;
background: #ff6b6b;
}
此时.container可能显示高度为0，因为浮动元素脱离了文档流。
解决方法有以下几种：
- 使用clear属性：添加一个空元素并设置clear: both;
- overflow方法：给父容器设置overflow: hidden或auto
- BFC触发：通过设置display: flow-root（推荐）
- ::after伪元素清除法：最常见做法
.clearfix::after {
content: "";
display: block;
clear: both;
}
将clearfix类应用到浮动容器上即可解决高度塌陷。
经典两栏与三栏浮动布局实战
利用float可以轻松实现多栏布局。
两栏布局示例：
.sidebar {
float: left;
width: 200px;
background: #eee;
}
.main-content {
margin-left: 210px; /* 避开侧边栏 */
background: #fff;
}
左侧为固定宽度的侧边栏，右侧为主内容区。
三栏布局（两侧固定，中间自适应）：
.left {
float: left;
width: 150px;
background: #ddd;
}
.right {
float: right;
width: 150px;
background: #ccc;
}
.center {
margin: 0 160px; /* 左右留出空间 */
background: #f9f9f9;
}
注意：.center需放在HTML结构最后，以确保能正确避开左右浮动元素。
浮动布局的局限性与替代方案
float最初设计用于图文环绕，被“借用”做布局存在一些问题：
- 需要手动清除浮动
- 响应式适配困难
- 元素顺序影响布局结构
- 垂直居中处理复杂
在现代开发中，建议：
- 使用Flexbox实现一维布局（如导航、卡片行）
- 使用Grid实现二维网格布局
- 仅在兼容老浏览器或特定排版需求时使用float
基本上就这些。float虽逐渐被取代，但理解其原理有助于更好掌握CSS布局机制。实际项目中可根据需求选择最合适的方式。
