方法一：float+margin
.main方法二：float+bfc.left
.right
.main方法三：float+負邊距+relative.left
.right
這裡和兩列布局有些不同，在兩列布局中，.main只需要右移給.left空出位置就可以了，所以給他乙個margin-left就能解決。而在三列布局中，他不僅需要給.left騰出空間，還要給.right騰出空間，此時margin已經無能為力了，所以需要他們三個外面的盒子來做這件事情：
body這樣子就會產生乙個問題，給body新增了padding之後，.main的寬度就減小了，這就意味著.left的margin-left值也會減小，於是，當.main的寬度減小到小於.left的寬度時，.left的負邊距已經不能為他創造足夠的空間到上面一行了，他就會被擠下去。所以，為了避免這個問題，需要給包裹盒子設定乙個最小寬度，當螢幕寬度小於這個值時，他將不再收縮。
.main方法四：float+負邊距+新盒子.left
.right
body
這時的問題是，當螢幕寬度小於.left和.right寬度之和時，.main-content即中間那列已經完全被擠沒了，所以，同樣需要給他們外面的盒子設定乙個最小寬度：
.main方法五：flexbox.left
.right
.main-content
body
.container.main
.left
.right
方法一：float+margin
.main方法二：float+bfc.left
.right
.main方法三：float+負邊距+relative.left
.right
這裡和兩列布局有些不同，在兩列布局中，.main只需要右移給.left空出位置就可以了，所以給他乙個margin-left就能解決。而在三列布局中，他不僅需要給.left騰出空間，還要給.right騰出空間，此時margin已經無能為力了，所以需要他們三個外面的盒子來做這件事情：
body這樣子就會產生乙個問題，給body新增了padding之後，.main的寬度就減小了，這就意味著.left的margin-left值也會減小，於是，當.main的寬度減小到小於.left的寬度時，.left的負邊距已經不能為他創造足夠的空間到上面一行了，他就會被擠下去。所以，為了避免這個問題，需要給包裹盒子設定乙個最小寬度，當螢幕寬度小於這個值時，他將不再收縮。
.main方法四：float+負邊距+新盒子.left
.right
body
這時的問題是，當螢幕寬度小於.left和.right寬度之和時，.main-content即中間那列已經完全被擠沒了，所以，同樣需要給他們外面的盒子設定乙個最小寬度：
.main方法五：flexbox.left
.right
.main-content
body
.container.main
.left
.right
三列自適應布局 聖杯布局
html結構type text css 設定左右內邊距 container style class container div 複製 在container中新增三列type text css container div center left right style class container ...
多列自適應布局
多列布局是從兩列布局引申出來的，所以我們先來看兩列布局 html結構如下所示 class parent class left leftp div class right r leftp r rightp div div 這裡的left是定寬，right自適應 left right 我們需要變動一下上...
兩列自適應布局
要求 1 兩個盒子在同一行 2 右邊的盒子需要佔滿剩下的空間 3 兩個盒子不能重疊 方式一 左側欄寬度不固定 兩列自適應布局title html,body wrap header container 父元素新增偽元素樣式清除浮動，處理float的子元素無法撐開父元素高度問題 clearfix aft...