實現頁面分欄的常用方法有三種：使用 Float、flexbox 或 grid 布局。1. 使用 float 實現兩欄布局時，左側欄設置 float: left 并指定寬度，主內容區通過 margin-left 避開側邊欄，父容器加 overflow: hidden 防止高度塌陷；2. flexbox 推薦用于現代布局，父容器設為 display: flex，左右欄固定寬度，中間區域用 flex: 1 自動填充剩余空間，結構清晰且無需處理浮動問題；3. css grid 適合復雜布局，通過 grid-template-columns 定義列寬，支持行高和間距控制，適用于多行多列場景；此外，響應式設計可通過媒體查詢在小屏幕下將各欄設為 block 顯示單欄布局，提升移動端體驗。
頁面分欄是網頁設計中非常基礎但也非常實用的布局方式，常用于文章頁、博客、后臺系統等。實現分欄的方式有多種，最常用的是使用 css 的浮動（float）、Flexbox 或者 Grid 布局。下面我會用通俗易懂的方式，介紹幾種常見的實現方法。
使用 float 實現兩欄布局
這是比較老但依然有效的方法，適合做主內容區和側邊欄的布局。
基本思路：
立即學習“前端免費學習筆記（深入）”；
- 左邊欄設置 float: left，并指定寬度
- 右邊內容區域設置 margin-left 來避開左側欄
<div style="overflow: hidden;"> <div style="float: left; width: 200px; background: #f0f0f0;">左側欄</div> <div style="margin-left: 210px; background: #fff;">主內容區</div> </div>
注意：父容器最好加上 overflow: hidden，防止子元素浮動后高度塌陷。
使用 Flexbox 實現三欄布局
Flexbox 是現代布局中最推薦的一種方式，簡單靈活，適合響應式設計。
基本結構：
<div style="display: flex;"> <div style="width: 200px; background: #f0f0f0;">左側欄</div> <div style="flex: 1; background: #fff;">中間內容</div> <div style="width: 200px; background: #eee;">右側欄</div> </div>
說明：
- 父容器設置為 display: flex
- 中間區域用 flex: 1 讓它自動填充剩余空間
- 左右欄固定寬度即可
這種方法的優點是不需要考慮浮動帶來的問題，代碼也更簡潔清晰。
使用 CSS Grid 實現復雜分欄
如果你需要更復雜的布局，比如多行多列，CSS Grid 是個好選擇。
<div style="display: grid; grid-template-columns: 200px 1fr 200px; gap: 10px;"> <div style="background: #f0f0f0;">左側欄</div> <div style="background: #fff;">主內容</div> <div style="background: #eee;">右側欄</div> </div>
特點：
- 使用 grid-template-columns 定義列寬
- 支持行高控制、間距設置等高級功能
- 更適合大項目或復雜布局場景
小貼士：響應式分欄怎么做？
在移動端設備上，我們可能不希望保持三欄或兩欄，而是希望變成單欄顯示。
可以使用媒體查詢來實現：
@media (max-width: 768px) { .container { display: block; } .left, .right { width: 100%; } }
這樣，在小屏幕下每個區域都會獨立占滿一行，提升可讀性和操作性。
基本上就這些方法了。每種方式都有適用場景，float 更適合兼容老舊瀏覽器，Flexbox 是大多數情況下的首選，Grid 則更適合復雜結構。你可以根據項目需求選擇合適的方式去實現頁面分欄布局。
