此**較簡單，左欄左浮動，右欄右浮動，主欄內容放在最後，用margin 值為左右的寬度來實現自適應
==注意:不浮動的元素要放在浮動元素後面==
**如下：
注意:採用浮動的方法時，浮動元素本身會佔據其位置（對不浮動的元素來說，都浮動的元素不佔據位置，此處需理解文件流和浮動流），後面不浮動的元素跟隨在後，但是絕對布局不會佔據位置，後面的內容會被覆蓋
**如下：
==原理：==
主體內容浮動佔據100%的位置，後面的元素依次浮動，然後使用margin相應的值來將其調整到本來的位置
main
left
right
此方法的優點：三欄相互關聯，可謂真正意義上的自適應，有一定的抗性——布局不易受內部影響。
缺點在於：相對比較難理解些，上手不容易，**相對複雜。出現百分比寬度，過多的負值定位，如果出現布局的bug，排查不易。
CSS 三列布局（三欄布局）
傳統三列布局 左右定寬，中間自適應 1.絕對定位 外邊距實現 左右盒子絕對定位，固定於頁面左右兩側 中間盒子的 margin left,margin right 分別等於左右兩個盒子的寬度。css left middle right 2.浮動 外邊距實現 左右盒子浮動到頁面兩側，中間盒子的 marg...
CSS布局 三欄布局
題外話 抓狂系列片之叄個我。三欄布局要求說明 兩邊固定寬度，中間自適應，頂部對齊 html文件結構有三種 內層div順序不同 左右中 左中右。實現效果 方法如下 1.左右中 對左右子元素使用了浮動屬性 float 從而脫離了文件流，如果按照正常左中右的順序，會導致右子元素出現在中間子元素的右下方。所...
頁面布局（三欄布局）
假設高度已知，請寫出三欄布局，其中左欄 右欄寬度各為300px，中間自適應。1.浮動布局 2.絕對定位 3.flexbox解決 4.table cell 布局 5.grid網格布局。doctype html en utf 8 viewport content width device width,i...