常見的布局方式: float布局、position定位、table布局、彈性(flex)布局、網格(grid)布局
1、float布局：
loat最初的設計的初衷是為了解決文字環繞的問題 ，即給乙個設定float屬性之後會使文字環繞在周圍顯示。float之所以可以實現文字環繞是源於設定float屬性的元素可以脫離文件流，使父元素高度塌陷。
**演示：
"main">
"left">左
"right">右
"center">中
.left
.right
.center
html模版:
"main">
"left">左
"center">中
"right">右
css樣式:
.left
.center
.right
html模版:這裡的html模版和 position使用的html一樣
table是一種常見的布局方式,他可以將整個頁面按照**的方式設定為多行多列,但是由於書寫table標籤比較麻煩尤其是涉及到table內嵌table的時候，所以css給我們提供了display: table的方式可以讓讓們方便的使用table布局, 設定子元素為列的屬性為display:table-cell
css樣式:
.main
.left,.center,.right
.left
.center
.right
彈性(flex)布局:
html模版:這裡的html模版和 position使用的html一樣
flex布局是w3c提出了一種新的方案，可以簡便、完整、響應式地實現各種頁面布局。
當給元素設定display:flex，則該元素就是乙個flex容器,其子元素就是容器成員,稱之為flex專案,每個專案預設按照從左到右方式排列。
css樣式:
.main
.left
.center
.right
html模版: 這裡的html模版和 position使用的html一樣
網格它將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局。
將屬性 display 值設為 grid 或 inline-grid 就建立了乙個網格容器，所有容器直接子結點自動成為網格專案。
gird提供了 gird-template-columns、grid-template-rows屬性讓我們設定行和列的高、寬
css樣式:
.div
1、float布局是現在用的比較多的布局很多門戶**目前使用這個布局方式,使用的時候只需要注意一定要清除浮動。
2、position布局只是根據定位屬性去直接設定元素位置,個人感覺不太適合用做頁面布局
3、table布局使用起來方便,相容性也不存在問題，不利於搜尋引擎抓取資訊
4、flex布局比較強大,但是還是存在ie上相容性問題，只能支援到ie9以上
5、grid布局很強大，但是相容性很差。
兩欄布局和三欄布局的實現
左側固定，右側自適應，不給右側設定固定寬度即可 1 class wrap 2class left 3左側固定內容45 class right 6右側內容自適應78 3左側固定內容45 class right 6右側內容自適應78 3左側固定內容45 class right 6右側內容自適應78 3左...
CSS實現 兩欄布局，三欄布局
aside div main div div aside main 左側欄固定寬度向左浮動，右側主要內容則用margin left留出左側欄的寬度，預設寬度為auto，自動填滿剩下的寬度。右側固定寬度，左側自適應則是同理，只要將固定欄右浮動，使用margin right空出其寬度即可。aside d...
實現三欄布局的幾種方法
三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如 網的首頁，就是個典型的三欄布局 即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。我們不妨假定這樣乙個布局 高度已知，其中左欄 右欄寬度各為300px,中間自適應，可以通過幾種方法來實現？以及各自的優缺...