寫出三欄布局，左欄寬度190、右欄寬度300px，中間寬度自適應。
1、浮動布局
1）解決方法
浮動方案是通過將左邊欄、右邊欄設定定寬、浮動，中間欄通過margin-left、margin-right來確定位置、寬度。
左邊欄
右邊欄主體內容區域：
這是通過浮動方案來解決的。
這是通過浮動方案來解決的。
2）優缺點
適用範圍：上面這種方式不論高度是否確定，都可以使用。但是適用於左邊欄、右邊欄和中間欄相鄰的那條邊框寬度、顏色、型別都一樣，否則。但用於布局一般應該是一樣的。後面的方案不再考慮邊框的問題。
如果顏色、型別不同，一旦三欄高度不同或寬度不同，一條邊框可能就會有兩種樣式。
如果寬度不同，三欄高度如果不同，中間欄被檔掉一部分，如下圖：
優點：實現簡單，做好清除浮動即可；相容性比較好；網頁縮放時能夠正常布局
缺點：浮動元素脫離文件流；如果沒有做好清除浮動，父元素容易出現高度塌陷；無法優先載入重要內容
2、絕對定位布局
1）解決方法：
絕對定位是將三欄設定為絕對定位，中間欄通過設定left值、right值來確定寬度。
主體內容區域：
這是通過絕對定位來解決的。
這是通過絕對定位來解決的。
左邊欄右邊欄
2）優缺點
優點：絕對定位布局簡單方便，不容易出問題；能夠優先載入重要內容；網頁縮放時能保持正常布局。
缺點：只適用固定高度的布局。絕對定位元素脫離文件流，父元素會出現高度塌陷，只能通過給父元素設定固定高度才能解決這一問題。
（浮動元素只要通過將父元素變成bfc即可解決，但絕對定位這種方式也無效。父元素是沒有辦法獲取到絕對定位元素的高度。要了解bfc可以參考css: 潛藏著的bfc）
3、**布局
1）解決方案
左邊欄
主體內容區域：
這是通過**布局來解決的。
這是通過**布局來解決的。
這是通過**布局來解決的。
右邊欄
缺點：一欄超出高度，其他欄也跟著變高，可能並不是我們期待的效果；無法設定欄間距；不能優先載入重要內容
4、聖杯布局
a.三欄包括在乙個容器中，空容器的左padding、右padding分別設定為左欄寬度值、右欄寬度值。
b.三欄全部設定為左浮動。左右兩欄加上負margin讓其跟中間欄div併排為一行。
（浮動元素可以設定負值，如果浮動元素b前面有浮動元素a，如果設定margin-left之後，上一行能夠容納下b，那b會跑到上一行。
但因為浮動元素有條規則：浮動元素高度不會超過之前的浮動元素。所以如果b的margin-left的絕對值即使很大，也不可能超過a的高度。）
c.設定完b後，左欄、右欄和中間欄都有重疊，設定左右為相對定位，並設定left、right值去除重疊。
主體內容區域：
這是通過聖杯布局來解決的。
這是通過聖杯布局來解決的。
左邊欄右邊欄
2）優缺點
優點：能夠先載入重要內容；允許任何列是最高的；dom結構簡單
缺點：同雙飛翼布局相比，聖杯布局的樣式複雜些；聖杯布局在縮放的時候，如果中間寬度小於左側寬度，布局混亂，如下圖所示。
5、雙飛翼布局
1）解決方法
雙飛翼布局是**ued針對聖杯布局討論出的一種優化方案。
雙飛翼布局比聖杯布局多使用了1個div，但不用相對布局。
主體內容區域：
這是通過浮動方案來解決的。
這是通過浮動方案來解決的。
左邊欄右邊欄
2）優缺點
優點：能夠先載入、渲染重要內容；允許任何列是最高的；相比聖杯布局，縮放時，也能保持正常布局。如下圖所示，是瀏覽器縮放到比較小時雙飛翼布局的效果。
缺點：同聖杯布局相比，dom結構複雜，需要增加額外標籤
關於雙飛翼布局與聖杯布局比較，可以檢視聊聊為什麼**要提出「雙飛翼」布局
6、flex布局（又稱為彈性布局）
flex布局可通過阮一峰的文章去深入了解：flex布局語法篇和flex布局使用篇。
1）解決方法
下面是採用css3的flex布局來實現的。
左邊欄主體內容區域：
這是通過flex布局來解決的。
這是通過flex布局來解決的。
這是通過flex布局來解決的。
右邊欄
可以看到中間欄超出指定高度後，其他兩列也跟著變高，這個可能不是我們期待的效果。可以修改容器的樣式來讓其他兩列保持自己的高度：
.container優點：絕對定位和相對定位都會引起元素脫離文件流，flex布局能夠避免這個問題。flex布局實現簡單，可以實現各種布局。flex是乙個比較完美的方案。目前移動端的布局也都是用flexbox。 flex布局是未來的趨勢。
缺點：不能相容ie9及以下瀏覽器。
7、grid布局（又稱為網格布局）
網格布局可通過mdn**深入了解：網格布局
css網格布局用於將頁面分割成數個主要區域，或者用來定義元件內部元素間大小、位置和圖層之間的關係。
像**一樣，網格布局讓我們能夠按行或列來對齊元素。 但是，使用css網格可能還是比css**更容易布局。 例如，網格容器的子元素可以自己定位，以便它們像css定位的元素一樣，真正的有重疊和層次。
1）解決方法
左邊欄主體內容區域：
這是通過網格布局來解決的。
這是通過網格布局來解決的。
這是通過網格布局來解決的。
右邊欄
和flex布局類似，中間欄超出高度後，其他兩列跟著變高。但是我還沒找到解決方法。後續我再關注下。
2）優缺點
grid 是二維布局系統，通常用於整個頁面的規劃。
優點：絕對定位和相對定位都會引起元素脫離文件流，flex布局能夠避免這個問題。grid布局實現簡單，可以實現各種布局。目前雖然只支援高版本的瀏覽器，相信不久的將來會流行起來。
缺點：
a.一欄超出高度，其他欄也跟著變高。可能並不是我們期待的效果。
b.只支援高版本的瀏覽器，ie不支援（ie11支援，但需提供字首），其他大部分需要較新版本的瀏覽器才支援。瀏覽器支援情況如下：
特性chrome
edge
firefox (gecko)
internet explorer
opera
safari
basic support
57.0
(yes)
52.0 (52.0)
未實現44
10.1
web前端 之 三欄布局的五種解決方案
自己在vscode上敲完測試完總結的，歡迎指教。問題描述 假設高度已知，請寫出三欄布局，其中左欄 右欄的寬度為300px，中間自適應 採用float浮動來解決，乙個容器中設定三個塊域，將左側塊域像左浮動，右側塊域向右浮動，中間自適應寬度。如圖 所示 優點 相容性好 缺點 脫離文件流，要做清除浮動的操...
布局問題 定高的三欄布局問題（5種方案解決）
問題 假設高度已知，寫出三欄布局，其中左欄，右欄各為300px,中間自適應 三欄布局可以用浮動，絕對定位，flexbox布局，布局 table cell 網格布局 grid 實現 1.浮動布局 1 section class layout float 2 style 3.layout article...
頁面布局之三欄布局的5種方案
題目 假設高度已知，請寫出三欄布局，其中左欄 右欄寬度各為300px，中間自適應的設定方案有幾種？這裡考察的是你對css的理解 首先初始化樣式bodyhtml編寫 由於三欄布局html 幾乎差不多，下面就不過多重複編寫了。這是三欄布局左右固定中間自適應 注 浮動解決方案需要將.center的類標籤與...