1. 解法一：使用float來解決
**如下：
*.left
.main
.right
<
/style>
<
/head>
="mo"
>
="left"
>left<
/div>
="right"
>right<
/div>
="main"
>main<
/div>
<
/div>
<
/body>
最開始的時候，我使用的dom順序如下圖：
="mo"
>
="left"
>left<
/div>
="main"
>main<
/div>
="right"
>right<
/div>
<
/div>
我調整了dom的順序就沒有任何問題了，這是為什麼呢？因為left，right設定了浮動，就不會占有文字流，而main沒有設定浮動就會獨佔一行。即如果先寫main，再寫right的話，right就會掉到下一行（因為main獨佔了上面一行）。
ps：這個問題真是沒想到，考慮細節沒考慮到，跪了。。。╮(╯﹏╰）╭
缺點：對於浮動問題，關鍵的就是清除浮動，如果處理不好，頁面就會出現問題
優點：相容性比較好
2. 解法二：使用position來定位
**如下：
<
!doctype html>
"en"
>
"utf-8"
>
document<
/title>
*.left
.main
.right
.mo<
/style>
<
/head>
="mo"
>
="left"
>left<
/div>
="main"
>main<
/div>
="right"
>right<
/div>
<
/div>
<
/body>
<
/html>
缺點：注意脫標問題
優點：快捷
3.解法三：使用flexbox
<
!doctype html>
"en"
>
"utf-8"
>
document<
/title>
*.left
.main
.right
.mo<
/style>
<
/head>
="mo"
>
="left"
>left<
/div>
="main"
>main<
/div>
="right"
>right<
/div>
<
/div>
<
/body>
<
/html>
優點：比較完美，移動端一般是使用這種
4.解法四：使用**布局
<
!doctype html>
"en"
>
"utf-8"
>
document<
/title>
*.mo
.left
.main
.right
<
/style>
<
/head>
="mo"
>
="left"
>left<
/div>
="main"
>main<
/div>
="right"
>right<
/div>
<
/div>
<
/body>
<
/html>
優點：相容性比較好
5.解法五：使用網格布局
<
!doctype html>
"en"
>
"utf-8"
>
document<
/title>
*.mo
.left
.main
.right
<
/style>
<
/head>
="mo"
>
="left"
>left<
/div>
="main"
>main<
/div>
="right"
>right<
/div>
<
/div>
<
/body>
<
/html>
延伸：如果去除已知高度的話，對**如果不進行改變的話，只有flex布局和**布局可以繼續使用
三欄布局的五種方法
1.position 1.這是三欄布局的絕對定位解決方案 2.這是三欄布局的絕對定位解決方案 優點 很快捷，設定很方便，而且也不容易出問題，你可以很快的就能想出這種布局方式缺點 絕對定位是脫離文件流的，意味著下面的所有子元素也會脫離文件流，這就導致了這種方法的有效性和可使用性是比較差的。2.floa...
三欄布局的四種方法
1 絕對定位法 該方法有個明顯的缺點，就是如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。html left main right css 簡單的進行css reset body,html 左右絕對定位 left,right left right 中...
三種方法實現CSS三欄布局
本文由雲 社群發表 本文會分別介紹三種css實現三欄布局的方法，可在瀏覽器中開啟檢視效果 實現方法 需要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離 doctype html en utf 8 css實現三欄布局1 title text css body left middle ri...