前端開發，離不開日常的網頁結構佈局，現下有很多第三方的組件庫，也自帶著很多佈局的方案，例如Ant Design中就擁有一套自己的Grid 24柵格系統和Layout佈局，方便我們進行網頁排版。
接下來，我們從前端技術角度上，去分析一下3種經典佈局的實現方案。
首先，我們列出一些比較常規的佈局：
- 聖杯佈局
- 雙飛翼佈局
- 多列等分佈局
1. 聖杯佈局
聖杯佈局： 左右兩欄的寬度固定不變，中間那一欄寬度自適應，且中間盒子的內容優先渲染。
聖杯佈局的優缺點：
- 優點：不需要額外的DOM結構，中間欄放在文檔流前面是優先渲染
- 缺點：特殊情況下，當中間盒子寬度小於左盒子的時候 就會發生佈局混亂
我們可以通過3種技術方案來實現聖杯佈局的佈局效果，分別是float、float優化、Flex
實現代碼：
HTML結構：
<div class="main">
<!-- 如果是聖杯佈局的原始方案，此處的center盒子要放在最前面 -->
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
