CSS3布局方式介紹

CSS3布局（Layout）系統是現代網頁設計中用于構建頁面結構和控制元素排列的一組強大工具。CSS3提供了多種布局方式，每種方式都有其適用場景，其中最常用的是Flexbox和CSS Grid。

先看傳統上幾種布局方式，再較詳細的介紹現代布局方式Flexbox和CSS Grid。

傳統上幾種布局方式

☆Multi-column Layout（多列布局）：

這種布局方式可以讓內容自動流進多個垂直排列的列中，適用于文本內容較多的情況。

基本使用：通過設置column-count或者column-width來確定列數或列寬，并通過column-gap和column-rule控制列之間的間隔和分隔線。例如：

<div class="multicol-container"><p>這是一段很長的文本，用于演示多列布局的效果。多列布局非常適合長文本的排版，類似于報紙的排版方式。</p>
</div><style>.multicol-container {column-count: 3;       /* 定義三列 */column-gap: 20px;      /* 列間距 */column-rule: 1px solid #ccc; /* 列分隔線 */}
</style>

☆Positioning（定位布局）：

雖然這不是CSS3新引入的布局方式，但仍然是非常重要的布局手段之一。通過position屬性（如static、 relative、absolute、fixed、sticky）結合top、right、bottom、left等屬性來進行元素的精確定位。

<div class="container"><div class="box" style="position: relative; top: 20px; left: 20px;">Relative</div><div class="box" style="position: absolute; top: 50px; right: 0;">Absolute</div><div class="box" style="position: fixed; bottom: 0; left: 0;">Fixed</div>
</div><style>.container {position: relative;width: 300px;height: 300px;border: 1px solid black;}.box {width: 100px;height: 100px;background-color: #f5f5f5;border: 1px solid #ccc;}
</style>

☆Floats and Clears（浮動與清除）：

浮動也是一種傳統的布局方法，主要用于讓文本環繞圖片或者其他元素。雖然CSS3帶來了更多先進的布局技術，但在某些情況下，浮動仍然有用。

使用float屬性可以將元素向左或向右移動，然后用clear屬性來防止其他元素圍繞浮動元素。

<div class="container"><div class="box" style="float: left;">Box 1</div><div class="box" style="float: right;">Box 2</div><div class="clear"></div><div class="box">Box 3</div>
</div><style>.container {width: 300px;border: 1px solid black;}.box {width: 100px;height: 100px;background-color: #f5f5f5;border: 1px solid #ccc;margin: 10px;}.clear {clear: both;}
</style>

現代布局方式Flexbox和CSS Grid

現代布局方式Flexbox和CSS Grid通常更強大、更靈活，下面介紹。

1. Flexbox（彈性盒子布局）

Flexbox是一種一維布局系統，主要用于在行或列中排列元素。它通過display: flex應用于父容器，使子元素能夠根據容器的大小自動調整寬度或高度。<