在网页前端开发中，新闻列表是内容类网站的核心模块之一，很多站点需要将新闻内容以两列并排的形式展示，既提升页面空间利用率，也让内容呈现更规整。CSS的浮动属性是实现这类布局的经典方案，通过float left和float right可以精准控制新闻项的排列方向，快速达成两列布局效果。
CSS浮动的基本特性
CSS的float属性用于定义元素在哪个方向浮动，浮动元素会脱离普通文档流，向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动元素的边框为止。常用的浮动值有两个：
float: left：元素向左浮动，后续的非浮动元素会环绕在它的右侧float: right：元素向右浮动，后续的非浮动元素会环绕在它的左侧
需要注意的是，浮动元素会脱离文档流，这意味着父容器如果没有设置固定高度，会出现无法包裹浮动子元素的高度塌陷问题，后续我们会讲解对应的解决方法。
用float left right实现新闻列表两列布局
要实现新闻列表的两列排列，核心思路是将新闻项设置为左浮动，让它们依次向左排列，当一行排满两个元素后，第三个元素会自动换行到下一行，形成两列效果。如果需要在右侧单独放置一个模块，也可以配合float right使用。
基础新闻列表两列布局实现
首先我们定义新闻列表的HTML结构，每个新闻项包含标题和简介：
<div class="news-container">
<div class="news-item">
<h3 class="news-title">国内科技产业迎来新突破</h3>
<p class="news-desc">近期国内多家科技企业发布最新研发成果，涉及人工智能、芯片制造等多个领域</p>
</div>
<div class="news-item">
<h3 class="news-title">国际体育赛事最新赛况</h3>
<p class="news-desc">多项国际顶级体育赛事本周进入关键阶段，多支队伍展开激烈角逐</p>
</div>
<div class="news-item">
<h3 class="news-title">文旅市场复苏态势明显</h3>
<p class="news-desc">假期期间国内多个热门旅游城市接待游客量同比大幅增长</p>
</div>
<div class="news-item">
<h3 class="news-title">新能源行业政策更新</h3>
<p class="news-desc">相关部门发布新能源产业最新扶持政策，推动行业高质量发展</p>
</div>
</div>
接下来编写对应的CSS样式，给新闻项设置左浮动，同时定义宽度和间距，实现两列排列：
/* 新闻容器样式 */
.news-container {
width: 1000px;
margin: 0 auto;
/* 后续会在这里添加清除浮动样式 */
}
/* 新闻项样式 */
.news-item {
float: left; /* 设置左浮动，让新闻项向左排列 */
width: 48%; /* 每个新闻项占容器宽度的48%，留出间距空间 */
margin-right: 2%; /* 右侧间距 */
margin-bottom: 20px; /* 底部间距 */
padding: 15px;
box-sizing: border-box; /* 让padding和border计入宽度，避免溢出 */
border: 1px solid #eee;
border-radius: 4px;
}
/* 每行的第二个新闻项去掉右侧间距 */
.news-item:nth-child(2n) {
margin-right: 0;
}
/* 新闻标题样式 */
.news-title {
font-size: 16px;
color: #333;
margin-bottom: 8px;
}
/* 新闻简介样式 */
.news-desc {
font-size: 14px;
color: #666;
line-height: 1.5;
}
上面的代码中，我们将每个.news-item的宽度设置为48%，加上2%的右侧间距，两个新闻项刚好占满一行，第三个新闻项会自动换行到下一行，就形成了标准的两列新闻列表布局。
结合float right实现带侧边栏的两列布局
如果页面左侧是新闻列表，右侧需要一个侧边栏模块，就可以给新闻列表容器设置float left，侧边栏设置float right，实现两列分区布局：
<div class="page-wrap">
<div class="news-list">
<div class="news-item">
<h3 class="news-title">教育领域改革新动向</h3>
<p class="news-desc">多地推进教育评价体系改革，注重学生综合素质培养</p>
</div>
<div class="news-item">
<h3 class="news-title">消费市场数据公布</h3>
<p class="news-desc">上月国内消费市场运行平稳，线上消费保持增长态势</p>
</div>
</div>
<div class="sidebar">
<h3>热门推荐</h3>
<ul>
<li>今日头条热点汇总</li>
<li>本周热门话题排行</li>
<li>用户关注内容榜单</li>
</ul>
</div>
</div>
对应的CSS样式如下：
.page-wrap {
width: 1200px;
margin: 0 auto;
}
/* 新闻列表左浮动 */
.news-list {
float: left;
width: 70%;
}
/* 新闻项样式，内部还是用左浮动实现两列 */
.news-item {
float: left;
width: 48%;
margin-right: 2%;
margin-bottom: 20px;
padding: 15px;
box-sizing: border-box;
border: 1px solid #eee;
}
.news-item:nth-child(2n) {
margin-right: 0;
}
/* 侧边栏右浮动 */
.sidebar {
float: right;
width: 28%;
padding: 15px;
box-sizing: border-box;
border: 1px solid #eee;
}
浮动带来的高度塌陷及清除方法
使用浮动布局时，父容器如果没有设置固定高度，会因为子元素浮动脱离文档流而出现高度塌陷，表现为父容器高度为0，后续元素会向上偏移，影响页面布局。常用的清除浮动方法有以下几种：
方法一：给父容器添加overflow属性
给父容器设置overflow: hidden或者overflow: auto，可以触发父容器的BFC（块级格式化上下文），从而包裹浮动子元素，解决高度塌陷问题。这种方法代码量最少，适合简单场景：
.news-container {
width: 1000px;
margin: 0 auto;
overflow: hidden; /* 清除浮动，包裹子元素 */
}
方法二：使用clearfix伪元素
这是目前最推荐的清除浮动方法，不需要修改父容器的原有属性，通过伪元素在父容器内部末尾添加一个不可见的元素，设置clear both清除浮动：
/* 定义clearfix类 */
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
/* 给需要清除浮动的父容器添加clearfix类 */
HTML结构修改为：
<div class="news-container clearfix"> <!-- 新闻项内容 --> </div>
方法三：在浮动元素后添加空div清除浮动
在最后一个浮动元素的后面添加一个空的div，设置clear: both属性，也可以清除浮动，但这种方法会额外增加无意义的HTML标签，现在使用较少：
<div class="news-container"> <div class="news-item">新闻内容</div> <div class="news-item">新闻内容</div> <div style="clear: both;"></div> </div>
浮动布局的注意事项
- 浮动元素的宽度如果设置不当，可能会导致换行异常，需要合理计算宽度和间距的总和，避免超过父容器宽度
- 如果后续元素不需要环绕浮动元素，一定要记得清除浮动，避免出现布局错乱
- 现在CSS Flexbox和Grid布局已经成为主流的布局方案，浮动更多用于兼容老版本浏览器的场景，新项目可以优先考虑Flex或Grid实现两列布局
通过上述方法，我们可以灵活使用float left和float right实现新闻列表的两列排列，同时处理好浮动带来的相关问题，让页面布局保持稳定。
CSS浮动float_leftfloat_right新闻列表布局两列布局修改时间：2026-07-17 22:30:40