CSS浮动是CSS定位体系中的重要组成部分，通过设置元素的float属性，可以让元素脱离普通文档流并向左侧或右侧移动，直到碰到父容器的边缘或者其他浮动元素的边缘，这个特性天然适合实现多列横向排列的布局效果。
浮动的基本语法
浮动通过float属性设置，可选值有left、right、none，默认值为none表示元素不浮动。当给元素设置浮动后，元素会脱离普通文档流，后续的非浮动元素会忽略浮动元素的位置，环绕在浮动元素周围。
下面是一个简单的浮动示例，让两个div元素横向排列：
/* 基础样式 */
.box {
width: 200px;
height: 150px;
background-color: #f0f0f0;
margin: 10px;
}
/* 设置左浮动 */
.float-left {
float: left;
}
<div class="box float-left">第一个浮动元素</div> <div class="box float-left">第二个浮动元素</div> <div class="box">未浮动元素</div>
用浮动实现两列布局
两列布局是常见的页面结构，比如左侧导航栏、右侧内容区的组合，通过浮动可以轻松实现。核心思路是给两个列都设置浮动，同时给父容器设置合适的宽度。
实现代码如下：
/* 父容器样式 */
.container {
width: 1000px;
margin: 0 auto;
/* 后续会添加清除浮动样式 */
}
/* 左侧栏样式 */
.sidebar {
float: left;
width: 250px;
height: 500px;
background-color: #e8f4ff;
}
/* 右侧内容区样式 */
.main-content {
float: left;
width: 750px;
height: 500px;
background-color: #fff8e1;
}
<div class="container">
<div class="sidebar">左侧导航区域</div>
<div class="main-content">右侧内容区域</div>
</div>
用浮动实现三列布局
三列布局比如左侧边栏、中间内容区、右侧边栏的结构，实现思路和两列布局类似，只需要给三个列都设置浮动，同时计算好总宽度不超过父容器宽度即可。
实现代码如下：
.container {
width: 1200px;
margin: 0 auto;
}
.left-sidebar {
float: left;
width: 200px;
height: 600px;
background-color: #e8f4ff;
}
.center-content {
float: left;
width: 800px;
height: 600px;
background-color: #ffffff;
}
.right-sidebar {
float: left;
width: 200px;
height: 600px;
background-color: #e8f4ff;
}
<div class="container">
<div class="left-sidebar">左侧边栏</div>
<div class="center-content">中间内容区</div>
<div class="right-sidebar">右侧边栏</div>
</div>
浮动带来的问题与清除浮动
当父容器内的子元素都设置了浮动后，子元素会脱离文档流，导致父容器无法感知子元素的高度，出现高度塌陷的问题，这时候需要清除浮动来修复。
常用的清除浮动方法有以下几种：
- 给父容器设置固定高度，但这种方法不够灵活，不适合内容高度不确定的场景
- 在父容器末尾添加一个空的
div元素，设置clear: both样式，强制让父容器包含浮动元素 - 给父容器设置
overflow: hidden属性，触发BFC（块级格式化上下文），让父容器包含浮动元素 - 使用伪元素清除浮动，这是目前最常用的方式，不需要额外添加DOM元素
伪元素清除浮动的代码示例：
/* 定义清除浮动的类 */
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix {
/* 兼容IE6、IE7 */
*zoom: 1;
}
使用的时候只需要给父容器添加clearfix类即可：
<div class="container clearfix">
<div class="sidebar">左侧导航区域</div>
<div class="main-content">右侧内容区域</div>
</div>
浮动多列布局的注意事项
使用浮动实现多列布局时需要注意几个问题：
- 所有浮动列的宽度之和不能超过父容器的宽度，否则后面的浮动元素会被挤到下一行
- 如果浮动元素之间有margin间距，需要把margin值计算到总宽度中
- 非浮动元素如果出现在浮动元素之后，会被浮动元素覆盖，需要给非浮动元素设置
clear属性避免这个问题 - 浮动布局是早期的实现方式，现在更推荐使用Flex布局或者Grid布局实现多列效果，但浮动在兼容老版本浏览器时仍然有应用价值
虽然现在前端布局有了更多新的方案，但理解浮动的原理和用法，仍然是CSS基础能力的重要组成部分，能够帮助开发者更好地理解文档流和定位的相关概念。