在网页布局场景中，同一容器内元素左右分离是极为常见的需求，比如导航栏左侧放logo、右侧放功能入口，或者内容区左侧放分类、右侧放详情。CSS的float属性可以很好地实现这种效果，通过控制元素向不同方向浮动，让元素脱离常规文档流，从而实现左右排列。
CSS浮动的基本属性
float属性用于定义元素在哪个方向浮动，常用取值有两个：left表示元素向左浮动，right表示元素向右浮动。设置了浮动的元素会脱离常规文档流，其后的非浮动元素会围绕它排列，这也是实现左右分离布局的核心原理。
需要注意的是，浮动元素会生成一个块级框，无论它本身是行内元素还是块级元素，设置浮动后都会具备块级元素的特性，可以设置宽高等属性。
实现左右分离布局的步骤
1. 准备基础HTML结构
首先需要一个外层容器，内部包含两个需要左右分离的子元素，示例结构如下：
<div class="container"> <div class="left-box">左侧内容</div> <div class="right-box">右侧内容</div> </div>
2. 设置浮动属性实现分离
给左侧元素设置float: left，右侧元素设置float: right，即可让两个元素分别靠左和靠右排列，示例CSS代码如下：
.container {
/* 容器宽度可以根据需求设置，这里设置固定宽度方便演示 */
width: 800px;
border: 1px solid #ccc;
/* 临时设置高度，避免浮动导致容器高度塌陷，后续会讲正确清除方式 */
height: 100px;
}
.left-box {
float: left;
width: 200px;
height: 100px;
background-color: #e6f7ff;
}
.right-box {
float: right;
width: 200px;
height: 100px;
background-color: #fff7e6;
}
上述代码运行后，左侧蓝色区域会靠容器左侧排列，右侧橙色区域会靠容器右侧排列，实现了基础的左右分离效果。
解决浮动带来的高度塌陷问题
如果去掉容器设置的固定高度，会发现容器高度会变成0，这就是浮动导致的高度塌陷问题：浮动元素脱离文档流后，外层容器无法感知浮动元素的高度，从而高度坍塌。解决这个问题的常用方式是清除浮动，有两种常见方案：
方案一：使用clear属性
在容器内部最后添加一个空的块级元素，设置clear: both，清除左右两侧的浮动，让容器重新包裹浮动元素：
<div class="container"> <div class="left-box">左侧内容</div> <div class="right-box">右侧内容</div> <div class="clear-fix"></div> </div>
.clear-fix {
clear: both;
}
方案二：使用伪元素清除浮动
这种方案不需要额外添加HTML元素，通过给容器添加伪元素::after实现清除浮动，是更推荐的写法：
.container::after {
content: "";
display: block;
clear: both;
}
添加这段CSS后，容器会自动识别浮动元素的高度，不会出现高度塌陷问题，同时代码结构更简洁。
完整示例代码
下面是包含清除浮动的完整可运行示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS浮动左右分离布局</title>
<style>
.container {
width: 800px;
border: 1px solid #ccc;
margin: 50px auto;
}
/* 伪元素清除浮动 */
.container::after {
content: "";
display: block;
clear: both;
}
.left-box {
float: left;
width: 200px;
height: 100px;
background-color: #e6f7ff;
text-align: center;
line-height: 100px;
}
.right-box {
float: right;
width: 200px;
height: 100px;
background-color: #fff7e6;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-box">左侧区域</div>
<div class="right-box">右侧区域</div>
</div>
</body>
</html>
注意事项
- 浮动元素的宽度如果超过容器宽度，会自动换行，无法实现左右分离效果，需要确保两个浮动元素的总宽度不超过容器宽度。
- 如果左右元素之间有间距需求，可以给浮动元素添加
margin属性，注意不要超过容器剩余宽度。 - 现代布局中也可以使用Flex布局实现左右分离，但浮动布局兼容性更好，适配老版本浏览器时仍然是不错的选择。