CSS两列与三列布局实战教程：自适应宽度与BFC方法

本文档详细介绍了如何使用CSS实现页面的两列布局与三列布局。首先，我们通过BFC（Block Formatting Context）的概念来构建三列布局。BFC允许我们创建独立于文档流的布局区域，通过浮动元素`<div class="left">`和`<div class="right">`分别占据左右两侧，并用`<div class="main">`作为中间栏，通过设置浮动、间距和`overflow:hidden`属性来确保布局的清晰。 具体实现步骤如下： 1. 创建一个包含三个部分的HTML结构：左侧浮动div `.left`，宽度为100px，背景颜色为橙色；右侧浮动div `.right`，同样宽度为100px，背景颜色也为橙色；中间主要内容div `.main`，设置高度为100px，背景颜色为绿色，并且使用`overflow:hidden`隐藏溢出内容。 CSS代码中，`.left`和`.right`设置`float:left`和`float:right`来创建浮动效果，`margin-right`和`margin-left`用于控制元素间的间距。 另一种常见的布局方式是双飞翼布局，由淘宝最早提出，主要目的是提高页面性能，让主列内容先加载。该布局使用wrap容器来包裹主要内容和两个子列，通过以下步骤实现： - 主内容`.main-content`左浮动，wrap容器`.wrap`设置宽度为100%。 - 子列`.left`和`.right`分别添加，它们也左浮动，同时`.main-content`的`margin-left`设置为负值，使得子列紧贴在主列两侧。 - 调整子列的负`margin`值和主列的`margin`值，以控制两列与主列之间的间隙。 这两种方法都是CSS基础布局技术的重要应用，对于理解和实现响应式设计中的多栏布局非常有帮助。通过灵活运用这些技巧，开发者可以轻松地根据屏幕尺寸调整网页布局，提升用户体验。