老話長(zhǎng)談，css的不固定適應(yīng)布局 不管是面試還是在平時(shí)的工作中，這樣的布局
形式一直都在用著，很常見(jiàn)，所以今天我就拿出來(lái)在嘮叨一下， 既是給自己一個(gè)備忘存儲(chǔ)，
也是一個(gè)學(xué)習(xí)鞏固的參考，知道大家都會(huì)，還是要記憶一下，不為其他，就為打好基礎(chǔ)。
話說(shuō)太多， 直接上代碼，一看就能明白。
方法多種， 你有新的方法可以補(bǔ)充說(shuō)明，在此感謝??！
一、左邊布局固定，右邊自適應(yīng)的布局
*{ margin:0; padding:0}
.whole{ width:100%;}
<div class="whole">
<p>自適應(yīng)測(cè)試</p>
<div class="left">固定左側(cè) 300px</div>
<div class="right">右側(cè)自適應(yīng)</div>
</div>
方法1： 左側(cè)用float浮動(dòng)，給固定寬度，右側(cè) 左邊距的距離==左側(cè)層的寬度
css代碼:
.left{ float:left;width:300px; background:red}
.right{ margin-left:300px; background:green; width:100%}
方法2：左邊絕對(duì)定位absolate，右邊代碼沒(méi)變化 還是右側(cè) 左邊距的距離==左側(cè)層的寬度;
css代碼:
.left{ position: absolute; left:0; width:300px; background:red}
.right{ margin-left:300px; background:green; width:100%}
方法3（個(gè)人喜好用）：左右兩邊都用絕對(duì)定位absolute， 父級(jí)相對(duì)定義
（不影響，建議加個(gè)相對(duì)定義，避免重疊）
css代碼:
.left{ position: absolute; left:0; width:300px; background:red}
.right{ position: absolute; left:300px; background:green; width:100%}
二、左邊布局不固定，右邊布局固定-----方法一致，位置換下而已
<div class="whole">
<p>自適應(yīng)測(cè)試</p>
<div class="left">左側(cè)自適應(yīng)</div>
<div class="right">右側(cè)寬度固定</div>
</div>
方法1、左側(cè)用左浮動(dòng)，右邊距==右側(cè)層的寬度的負(fù)值（因?yàn)槟闶亲髶伍_(kāi)，
距離右側(cè)的距離不錯(cuò)層）， 右側(cè)的有浮動(dòng)，固定寬度
.left{ float:left; width:100%; margin-right:-300px; background: red; }
.right{ float: right; width: 300px;background: blue;}
方法2、左右兩邊都用絕對(duì)定位absolute， 父級(jí)相對(duì)定義（不影響，建議加個(gè)
相對(duì)定義，避免重疊） .left{ position: absolute; left:0; width: 100%; background: red;}
.right{ position: absolute; left:200px; width:200px; background: green;}
方法3、
清除浮動(dòng)的方法就一筆帶過(guò)， 都會(huì)
1、在浮動(dòng)層的下面單獨(dú)定義一個(gè)層 <div class="clear"></div> .clear{ clear:both}
2、偽類方法:after (用在父類的布局層上)-常用
.father::after,.father::before{ clear: both; content: ""; display: table;}
<div class=’father’>
<div class="son-flotleft"></div>
<div class="son-flotrgt"></div>
</div>
3、父級(jí)元素設(shè)置overflow為hidden或者auto，固定高度 也可以--不建議
.father{overflow:hidden; width: 100%; } //overflow:auto; height:300px;
寫(xiě)的都比較簡(jiǎn)單， 文字表述很少，都是代碼，說(shuō)的思路再多，
不讓直接代碼實(shí)際，用了后就明白意思了。
【 微信掃一掃 】
