在网页排版中，块级元素如div默认会占满整行并自上而下排列。如果希望两个内容区块在水平方向并排显示，最经典的做法是使用CSS的float属性。通过给左侧容器设置float:left、右侧容器设置float:right，浏览器会让它们脱离普通文档流并分别靠向父容器的左右边缘，从而实现两列布局。
一、浮动实现两列布局的基础写法
最基础的浮动两列布局，需要准备一个父容器以及两个子列。左侧列使用float:left向右浮动停靠，右侧列使用float:right向左浮动停靠。为了让两列真正并排而非换行，它们的宽度相加必须小于父容器的内容宽度，同时建议显式设置父容器宽度或使用百分比控制。
下面是一段可直接运行的HTML与CSS示例，展示了如何用float:left和float:right让两栏内容水平排列：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>浮动两列布局</title>
<style>
.container {
width: 100%;
background: #f0f0f0;
}
.left {
float: left;
width: 30%;
background: #cde;
height: 200px;
}
.right {
float: right;
width: 65%;
background: #ecd;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左侧导航内容</div>
<div class="right">右侧主体内容</div>
</div>
</body>
</html>
上述代码中，.left和.right都脱离了普通流，.container如果没有额外处理，其高度会变为0，因为浮动元素不再参与父级高度计算。这是新手最常遇到的“高度塌陷”问题。
浮动布局的优点是兼容性极好，在IE6等老旧环境也能运行；缺点是结构依赖顺序与宽度计算，一旦内容动态变化就容易错位，后期响应式改造也较麻烦。
二、清除浮动避免父容器塌陷
由于浮动元素脱离文档流，父容器无法自动包裹它们。如果不处理，父容器后面的元素会紧贴上浮，造成整体排版混乱。最常见的清除浮动方式有三种：使用clear属性、父级设置overflow:hidden、以及伪元素clearfix。
其中伪元素方案在现代开发中更受推荐，它不增加冗余标签，也不会裁剪溢出内容。代码如下：
.container::after {
content: "";
display: block;
clear: both;
}
这段CSS通过在父容器末尾插入一个不可见的块级元素，并让其clear:both，从而把浮动的影响限制在父容器内部，父容器就能正确撑开高度。相比直接在HTML里写<div style="clear:both"></div>，伪元素更干净。
如果项目只需兼容较新浏览器，也可以直接给.container加overflow:hidden，触发BFC（块级格式化上下文）来包裹浮动。但要注意该方式会隐藏超出容器的内容，不适合有下拉菜单的场景。
三、与flex布局的对比及适用建议
现在更主流的两列布局方案是使用display:flex。flex不需要清除浮动，子项默认沿主轴排列，且能自动分配剩余空间。下面的代码用flex重写了前面的例子：
.container {
display: flex;
}
.left {
width: 30%;
background: #cde;
}
.right {
flex: 1;
background: #ecd;
}
从维护性看，flex明显优于float：它不会产生高度塌陷，顺序与对齐控制也更直观。但在必须支持非常旧的浏览器、或维护老项目时，float方案仍是务实选择。
总结来说，用float:left和float:right做两列并排，核心在于理解脱离文档流特性和清除浮动。新项目建议优先flex，旧兼容场景再考虑浮动实现。
CSS浮动两列布局float_left_right修改时间：2026-08-05 22:57:29