css實現左（右）側固定寬度，右（左）側寬度自適應 ---清除浮動

老話長談，css的不固定適應佈局   無論是面試仍是在平時的工做中，這樣的佈局形式一直都在用着，很常見，因此今天我就拿出來在嘮叨一下， 既是給本身一個備忘存儲，也是一個學習鞏固的參考，知道你們都會，仍是要記憶一下，不爲其餘，就爲打好基礎。

話說太多， 直接上代碼，一看就能明白。 也許你會不屑一顧的說簡單，但是我就喜歡寫一些。。。。。。做爲一個菜鳥，就要從基礎努力學習才行。

方法多種， 你有新的方法能夠補充說明，在此感謝！！

1、左邊佈局固定，右邊自適應的佈局

  *{ margin:0; padding:0}

   .whole{ width:100%;}

  <div class="whole">
        <p>自適應測試</p>
           <div class="left">固定左側 300px</div>
        <div class="right">右側自適應</div>
 </div>

 方法1： 左側用float浮動，給固定寬度，右側 左邊距的距離==左側層的寬度

  　　css代碼:
　　　　.left{ float:left;width:300px; background:red}
　　　　.right{ margin-left:300px; background:green; }

 方法2：左邊絕對定位absolate，右邊代碼沒變化 仍是右側 左邊距的距離==左側層的寬度;

　　css代碼:

　　　　.left{ position: absolute; left:0; width:300px; background:red}
　　　　.right{ margin-left:300px; background:green; }

  方法3（我的喜愛用）：左右兩邊都用絕對定位absolute， 父級相對定義（不影響，建議加個相對定義，避免重疊） 

　　css代碼:

　　　　.left{ position: absolute; left:0; width:300px; background:red}

　　　　.right{ position: absolute; left:300px; background:green; }

2、左邊佈局不固定，右邊佈局固定-----方法一致，位置換下而已

   <div class="whole">
        <p>自適應測試</p>
           <div class="left">左側自適應</div>
        <div class="right">右側寬度固定</div>
  </div>

  方法一、左側用左浮動，右邊距==右側層的寬度的負值（由於你是左撐開，距離右側的距離不錯層）， 右側的有浮動，固定寬度

      .left{ float:left; width:100%; margin-right:-300px; background: red; }
　　.right{ float: right; width: 300px;background: blue;}

 方法二、左右兩邊都用絕對定位absolute， 父級相對定義（不影響，建議加個相對定義，避免重疊）      

      .left{ position: absolute; left:0;  width: 100%;  background: red;}
　　.right{ position: absolute;  left:200px; width:200px; background: green;}

 方法三、

 

 清除浮動的方法就一筆帶過， 都會

    一、在浮動層的下面單獨定義一個層 <div class="clear"></div>   .clear{ clear:both}

    二、僞類方法:after (用在父類的佈局層上)-經常使用

         .father::after,.father::before{ clear: both; content: ""; display: table;}
  　　 <div class='father'>
       　　 <div class="son-flotleft"></div>
　　　　　<div class="son-flotrgt"></div>
  　　 </div>

　　三、父級元素設置overflow爲hidden或者auto，固定高度 也能夠--不建議　

         .father{overflow:hidden; width: 100%; }　  //overflow:auto; height:300px;

寫的都比較簡單， 文字表述不多，都是代碼，說的思路再多，不讓直接代碼實際，用了後就明白意思了，good lucky。。

 

補充-- 禁止橫屏

<div class="orientation-alert"><p>在豎屏下瀏覽效果更佳！</p></div>.orientation-alert{background: rgba(0,0,0,.85);position: fixed;left: 0;top: 0;height: 100%;width: 100%;z-index: 1000000;color: #FFF;display: none;}.orientation-alert p{position: absolute;width: 100%;top: 50%;font-size: 20px;line-height: 30px;margin-top: -15px;text-align: center;}@media screen and (orientation : landscape){.orientation-alert{     display: block;   }}@media screen and (orientation : portrait){.orientation-alert{     display: none;   }}