CSS implements fixed width on the left (right) side and adaptive width on the right (left) side --- Clear floating

老话长谈，css的不固定适应布局   不管是面试还是在平时的工作中，这样的布局形式一直都在用着，很常见，所以今天我就拿出来在唠叨一下， 既是给自己一个备忘存储，也是一个学习巩固的参考，知道大家都会，还是要记忆一下，不为其他，就为打好基础。

话说太多， 直接上代码，一看就能明白。 也许你会不屑一顾的说简单，可是我就喜欢写一些。。。。。。作为一个菜鸟，就要从基础努力学习才行。

方法多种， 你有新的方法可以补充说明，在此感谢！！

一、左边布局固定，右边自适应的布局

  *{ margin:0; padding:0}

   .whole{ width:100%;}

 

       

自适应测试

           

固定左侧 300px

        

右侧自适应

 

 方法1： 左侧用float浮动，给固定宽度，右侧 左边距的距离==左侧层的宽度

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

 方法2：左边绝对定位absolate，右边代码没变化 还是右侧 左边距的距离==左侧层的宽度;

　　css代码:

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

  方法3（个人喜好用）：左右两边都用绝对定位absolute， 父级相对定义（不影响，建议加个相对定义，避免重叠） 

　　css代码:

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

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

二、左边布局不固定，右边布局固定-----方法一致，位置换下而已

   

       

自适应测试

           

左侧自适应

        

右侧宽度固定

 

  方法1、左侧用左浮动，右边距==右侧层的宽度的负值（因为你是左撑开，距离右侧的距离不错层）， 右侧的有浮动，固定宽度

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

 方法2、左右两边都用绝对定位absolute， 父级相对定义（不影响，建议加个相对定义，避免重叠）      .left{ position: absolute; left:0;  width: 100%;  background: red;}
　　.right{ position: absolute;  left:200px; width:200px; background: green;}

 方法3、

 

 清除浮动的方法就一笔带过， 都会

    1、在浮动层的下面单独定义一个层

   .clear{ clear:both}

    2、伪类方法:after (用在父类的布局层上)-常用

         .father::after,.father::before{ clear: both; content: ""; display: table;}
  　　

       　　

　　　　　

  　　

　　3. Parent elementSet overflow to hidden or auto, fixed height is also possible - not recommended　

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

The writing is relatively simple. There are very few textual expressions. They are all codes. No matter how many ideas are mentioned, the actual code is not allowed. After using it, you will understand the meaning. Good luck. .