一，佈局方式

網頁的佈局方式其實就是指瀏覽器是如何對網頁中的元素進行排版的

1. display 屬性（文件流佈局），傳統盒模型佈局方式
   1. 按照文件的順序一個一個顯示出來，塊元素獨佔一行，行內元素共享一行
2.  position 屬性（定位佈局） ，傳統盒模型佈局方式
   1. 通過 position 屬性來進行定位
3.  float屬性（浮動佈局），傳統盒模型佈局方式
   1. 使用 float 屬性，使元素脫離文件流，浮動起來
4. flex佈局（伸縮佈局）
5. grid佈局（網格佈局）

二，佈局案例

1. 單列布局
   1. 上中下同寬
   2. 上下為瀏覽器寬度，中間沒有
2. 雙列&三列布局
   1. float+margin
   2. position+margin
   3. 聖盃佈局（float+負margin）
   4. 雙飛翼佈局（float+負margin）
   5. flex佈局