CSS布局完全指南：从浮动到Flexbox

CSS布局是前端开发的核心技能之一，也是很多前端开发者的痛点。从最早的table布局，到浮动布局，再到定位布局，再到现在的Flexbox和Grid，CSS布局技术在不断发展，变得越来越强大和简单。

2016年，Flexbox已经得到了主流浏览器的良好支持，成为了CSS布局的主流方案，但是很多开发者还在使用传统的浮动布局，对Flexbox不够熟悉。今天就来详细讲解CSS布局，从传统的浮动布局到现代的Flexbox，带大家全面掌握CSS布局。

CSS布局基础

1. 盒模型：盒模型是CSS布局的基础。每个HTML元素都是一个矩形盒子，由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。

盒模型有两种：

标准盒模型（W3C盒模型）：width和height只包含内容，不包含padding和border。元素的实际宽度 = width + padding-left + padding-right + border-left + border-right。
IE盒模型（怪异盒模型）：width和height包含内容、padding和border。元素的实际宽度就是width。

可以通过box-sizing属性设置盒模型：

/* 标准盒模型（默认） */
box-sizing: content-box;

/* IE盒模型 */
box-sizing: border-box;

推荐使用box-sizing: border-box，这样设置width和height更直观，不需要计算padding和border。通常会全局设置：

* {
    box-sizing: border-box;
}

2. display属性： display属性决定了元素的显示类型，是CSS布局的核心属性。

常用值：

block：块级元素，独占一行，width和height生效，margin和padding上下左右都生效。如div、p、h1-h6。
inline：行内元素，不独占一行，width和height不生效，margin上下不生效，padding上下不影响布局。如span、a、strong。
inline-block：行内块元素，不独占一行，但是width、height、margin、padding都生效。如img、input、button。
none：元素不显示，不占据空间。
flex：弹性布局，子元素成为弹性项目。
grid：网格布局，子元素成为网格项目。
table：表格布局。

3. position属性： position属性决定了元素的定位方式，是CSS布局的重要属性。

常用值：

static：静态定位（默认），元素按照正常文档流排列，top、right、bottom、left不生效。
relative：相对定位，元素相对于自身原来的位置偏移，不脱离文档流，原来的位置保留。
absolute：绝对定位，元素相对于最近的非static定位的祖先元素偏移，脱离文档流，原来的位置不保留。
fixed：固定定位，元素相对于浏览器视口偏移，脱离文档流，滚动时位置不变。
sticky：粘性定位，元素在滚动到指定位置前是相对定位，滚动到指定位置后变成固定定位。

4. 文档流：文档流是HTML元素默认的排列方式：块级元素从上到下排列，行内元素从左到右排列。脱离文档流的方式有：浮动（float）、绝对定位（absolute）、固定定位（fixed）。

传统布局方式

1. 表格布局：表格布局是最早的CSS布局方式，使用table元素进行布局。优点是简单、兼容性好；缺点是语义化差、加载慢、不灵活、难以维护。现在已经不推荐使用，只在需要兼容老浏览器时使用。

<table>
    <tr>
        <td>侧边栏</td>
        <td>主内容</td>
    </tr>
</table>

2. 浮动布局：浮动布局是2016年之前最主流的CSS布局方式，使用float属性让元素浮动，实现多列布局。

float属性值：

left：向左浮动
right：向右浮动
none：不浮动（默认）

浮动的特点：

浮动元素脱离文档流，原来的位置不保留
浮动元素会向左或向右移动，直到碰到父元素边界或另一个浮动元素
浮动元素会变成块级元素（display: block）
浮动元素会影响后续元素的布局，后续元素会围绕浮动元素排列

两列布局示例：

<div class="container">
    <div class="sidebar">侧边栏</div>
    <div class="main">主内容</div>
</div>

.sidebar {
    float: left;
    width: 200px;
}
.main {
    margin-left: 200px; /* 留出侧边栏的宽度 */
}

清除浮动：浮动元素会导致父元素高度塌陷（父元素不包含浮动元素的高度），需要清除浮动。

清除浮动的方法：

额外标签法：在浮动元素后添加一个空标签，设置clear: both。

<div style="clear: both;"></div>

父元素overflow法：给父元素设置overflow: hidden或auto。

.container {
    overflow: hidden;
}

伪元素法（推荐）：给父元素添加::after伪元素清除浮动。

.container::after {
    content: '';
    display: block;
    clear: both;
}

浮动布局的优点：兼容性好，实现简单；缺点：需要清除浮动，容易出问题，不够灵活，难以实现复杂布局（如垂直居中、等高列）。

3. 定位布局：定位布局使用position属性进行布局，适合特殊场景，如弹窗、固定导航、角标等。不适合整体页面布局，因为定位元素脱离文档流，难以维护，不响应式。

居中布局示例：

/* 水平垂直居中（已知宽高） */
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
}

/* 水平垂直居中（未知宽高） */
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Flexbox布局

Flexbox（弹性盒子布局）是CSS3新增的布局方式，是2016年最主流的CSS布局方式，能够轻松实现各种复杂布局，如垂直居中、等高列、自适应布局等。

1. Flexbox基本概念：使用Flexbox布局，需要给父元素设置display: flex，父元素成为弹性容器（flex container），子元素成为弹性项目（flex item）。

弹性容器有两条轴：

主轴（main axis）：弹性项目的主要排列方向，默认是水平方向（从左到右）
交叉轴（cross axis）：与主轴垂直的方向，默认是垂直方向（从上到下）

2. 弹性容器属性：

flex-direction：设置主轴方向

flex-direction: row; /* 水平方向，从左到右（默认） */
flex-direction: row-reverse; /* 水平方向，从右到左 */
flex-direction: column; /* 垂直方向，从上到下 */
flex-direction: column-reverse; /* 垂直方向，从下到上 */

flex-wrap：设置是否换行

flex-wrap: nowrap; /* 不换行（默认），弹性项目会压缩宽度 */
flex-wrap: wrap; /* 换行，超出容器宽度的项目会换到下一行 */
flex-wrap: wrap-reverse; /* 反向换行 */

flex-flow：flex-direction和flex-wrap的简写

flex-flow: row wrap; /* 水平方向，换行 */

justify-content：设置弹性项目在主轴上的对齐方式

justify-content: flex-start; /* 左对齐（默认） */
justify-content: flex-end; /* 右对齐 */
justify-content: center; /* 居中对齐 */
justify-content: space-between; /* 两端对齐，项目之间间距相等 */
justify-content: space-around; /* 每个项目两侧间距相等 */
justify-content: space-evenly; /* 项目之间和两端间距都相等 */

align-items：设置弹性项目在交叉轴上的对齐方式

align-items: stretch; /* 拉伸，项目占满交叉轴高度（默认） */
align-items: flex-start; /* 顶部对齐 */
align-items: flex-end; /* 底部对齐 */
align-items: center; /* 居中对齐 */
align-items: baseline; /* 基线对齐 */

align-content：设置多行弹性项目在交叉轴上的对齐方式（只有一行时不生效）

align-content: stretch; /* 拉伸（默认） */
align-content: flex-start; /* 顶部对齐 */
align-content: flex-end; /* 底部对齐 */
align-content: center; /* 居中对齐 */
align-content: space-between; /* 两端对齐 */
align-content: space-around; /* 每行两侧间距相等 */

3. 弹性项目属性：

order：设置弹性项目的排列顺序，数值越小越靠前，默认0

.item1 { order: 2; }
.item2 { order: 1; } /* item2会排在item1前面 */

flex-grow：设置弹性项目的放大比例，默认0（不放大）

.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; } /* 剩余空间按1:2分配 */

flex-shrink：设置弹性项目的缩小比例，默认1（空间不足时缩小）

.item1 { flex-shrink: 1; }
.item2 { flex-shrink: 0; } /* item2不缩小 */

flex-basis：设置弹性项目的初始大小，默认auto（项目的原始大小）

.item { flex-basis: 200px; } /* 初始宽度200px */

flex：flex-grow、flex-shrink、flex-basis的简写

flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 平分剩余空间 */
flex: 0 0 200px; /* 不放大不缩小，固定200px */
flex: auto; /* flex: 1 1 auto */
flex: none; /* flex: 0 0 auto */

align-self：设置单个弹性项目在交叉轴上的对齐方式，覆盖align-items

.item { align-self: center; } /* 单个项目居中对齐 */

4. Flexbox常用布局示例：

水平垂直居中：

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

两列布局（侧边栏固定，主内容自适应）：

.container {
    display: flex;
}
.sidebar {
    flex: 0 0 200px; /* 固定200px */
}
.main {
    flex: 1; /* 自适应剩余空间 */
}

三列布局（两侧固定，中间自适应）：

.container {
    display: flex;
}
.left, .right {
    flex: 0 0 200px;
}
.middle {
    flex: 1;
}

等高列：

.container {
    display: flex;
}
.column {
    flex: 1;
    /* 弹性项目默认align-items: stretch，自动等高 */
}

导航栏（logo左对齐，菜单右对齐）：

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

卡片列表（自适应换行）：

.card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 项目间距 */
}
.card {
    flex: 0 0 calc(33.333% - 20px); /* 每行3个 */
}

响应式布局

响应式布局是指网页能够根据不同设备的屏幕尺寸，自动调整布局，提供良好的用户体验。2016年，响应式布局已经成为前端开发的标配。

1. 媒体查询：媒体查询是响应式布局的核心，通过@media规则，根据不同的屏幕尺寸应用不同的CSS样式。

/* 默认样式（移动端优先） */
.container {
    width: 100%;
}

/* 平板（≥768px） */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 桌面（≥992px） */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

/* 大屏（≥1200px） */
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

常用断点：

超小屏（手机）：< 768px
小屏（平板）：≥ 768px
中屏（桌面）：≥ 992px
大屏（大屏桌面）：≥ 1200px

2. 流式布局：流式布局使用百分比宽度，让元素根据父元素宽度自动调整。

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.sidebar {
    width: 20%;
    float: left;
}
.main {
    width: 80%;
    float: left;
}

3. 弹性图片：图片默认不会自适应，需要设置max-width: 100%让图片自适应容器宽度。

img {
    max-width: 100%;
    height: auto;
}

4. 移动端优先：移动端优先（Mobile First）是响应式布局的设计原则，先设计移动端样式，再通过媒体查询逐步增加大屏样式。这样可以保证移动端的加载速度和体验，也符合移动互联网的趋势。

CSS布局最佳实践

使用box-sizing: border-box：全局设置盒模型为border-box，让布局更直观。
优先使用Flexbox：Flexbox是目前最强大、最简单的布局方式，优先使用Flexbox，少用浮动和定位。
使用语义化标签：使用header、nav、main、aside、footer等语义化标签，而不是全用div。
响应式设计：使用媒体查询实现响应式布局，适配不同设备。
避免使用固定宽度：尽量使用百分比、flex、max-width等自适应单位，避免固定像素宽度。
使用CSS Reset或Normalize：统一不同浏览器的默认样式，避免浏览器差异。
注释和模块化：CSS代码要加注释，分模块管理，便于维护。
性能优化：避免使用过于复杂的选择器，避免使用@import，压缩CSS文件。

总结

CSS布局是前端开发的核心技能，从传统的表格布局、浮动布局、定位布局，到现代的Flexbox和Grid，CSS布局技术在不断发展。2016年，Flexbox已经成为主流，能够轻松实现各种复杂布局，是前端开发者必须掌握的技能。

本文介绍了CSS布局的基础知识（盒模型、display、position、文档流）、传统布局方式（表格布局、浮动布局、定位布局）、Flexbox布局（基本概念、容器属性、项目属性、常用布局示例）、响应式布局（媒体查询、流式布局、弹性图片、移动端优先）以及CSS布局最佳实践。

掌握CSS布局，需要多练习、多实践，在实际项目中不断积累经验。希望这篇指南能帮助大家全面掌握CSS布局，写出更优雅、更灵活、更易维护的CSS代码。

CSS布局还在不断发展，Grid布局在2016年也开始得到浏览器支持，未来会成为更强大的二维布局方式。作为前端开发者，要持续学习，跟上技术的发展，掌握最新的布局技术。