概述与目标
从 float 左右到分栏的演变
在网页布局中，浮动（float）曾是实现两列排版的主力手段。对于新闻模块而言，左侧为新闻列表，右侧为侧边信息，如广告、热文等，最初的方案通常采用 float: left 与 float: right 的组合来摆放列块。
理解目标有助于后续的代码维护：产生稳定的两列布局、减少高度错乱、方便响应式调整。本章节为后续的实战做铺垫，确保你掌握从简单浮动到分栏布局的逻辑链路。
下面的代码演示了一个最初级的两列布局结构，使用浮动实现左右两列，注意容器需要有明确高度或清除浮动以避免塌陷。
/* 最初级两列布局示例（未含清除浮动） */
.news-list { width: 65%; float: left; }
.news-sidebar { width: 35%; float: right; }结构与清除浮动的要点
CSS 清除浮动的常用做法
当父容器包含浮动子元素时，容器高度可能塌陷，导致背景和边框不包裹内容。这时需要使用清除浮动（clearfix）来恢复文档流，确保布局的稳定性。
最常用的做法是使用伪元素 ::after 以及 clear: both，从而让父容器在浮动子元素之后“自清”并包裹内容。
下面给出两种常见的 clearfix 实现，供实际项目中选用。
/* clearfix 方案1：伪元素 */
.news-layout::after { content: ""; display: table; clear: both; }/* 清除浮动的常用类示例（兼容写法） */
.clearfix:after { content: ""; display: table; clear: both; }
.clearfix { *zoom: 1; } /* IE7 及以下兼容写法 */在实际项目中，推荐给父容器直接应用 clearfix，以确保在未来增加新的浮动子元素时仍然能保持稳定的高度。
实战步骤：从浮动到分栏的完整实现
逐步搭建新闻模块
第一步，定义 HTML 结构，左侧新闻列表容器、右侧侧栏容器，确保语义清晰，便于后续维护。
<div class="news-layout clearfix"><section class="news-list"><article class="news-item"><h4>标题示例</h4><p>摘要文本……</p></article><!-- 继续增加新闻项 --></section><aside class="news-sidebar"><div class="widget">广告位</div><div class="widget">热文排行</div></aside>
</div>第二步，设置浮动样式：新闻列表左浮，侧栏右浮，以实现初步的两列分布。
.news-list { width: 65%; float: left; }
.news-sidebar { width: 35%; float: right; }第三步，应用清除浮动，确保父容器高度自适应，避免子元素高度变化导致布局错乱。
/* 使用 clearfix 清除浮动 */
.news-layout::after { content: ""; display: table; clear: both; }第四步，调整间距和垂直对齐，确保新闻项的排布整齐美观，避免内容过于拥挤或分布不均。
.news-item { margin-bottom: 1rem; padding: .75rem; border-bottom: 1px solid #eee; }第五步，进行响应式处理，移动端需要将两列转为单列以提升阅读体验。
@media (max-width: 900px) {.news-list, .news-sidebar { float: none; width: 100%; }
}响应式与分栏的可维护性
使用媒体查询与替代方案
在不同设备上保持两列排布的可读性与美观性，需要媒体查询来动态调整布局，在桌面端保留两列，在移动端转为单列，提升可用性。
除了媒体查询，可维护性也是设计的关键点：使用清晰的命名、避免过度嵌套浮动，尽量将通用样式抽取成可重复使用的类，以减少后续修改成本。
需要了解的替代方案包括 Flexbox 与 CSS Grid，它们在现代浏览器中提供更直观的两列或多列布局能力，但本教程聚焦于从最基础的浮动实现到分栏结构的完整实战，以便理解浮动演进的核心思路。
/* 基本的响应式切换示例（保持向后兼容性） */
@media (min-width: 1200px) {.news-list { width: 70%; float: left; }.news-sidebar { width: 30%; float: right; }
}
@media (max-width: 899px) {.news-list, .news-sidebar { float: none; width: 100%; }
}为了提高复用性，可以将两列布局抽象为通用类，例如将容器命名为 layout、子项命名为 two-column，并在需要时快速替换为其他区域块，保持代码的一致性与扩展性。
<div class="layout two-column"><section class="content-block">内容……</section><aside class="side-block">侧边内容……</aside>
</div>
