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;   }}