CSS는 왼쪽(오른쪽)에 고정 너비를 구현하고 오른쪽(왼쪽)에 적응형 너비를 구현합니다. --- 클리어 플로팅

老话长谈，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. 상위 요소 는 오버플로를 숨김 또는 자동으로 설정하고, 높이 고정도 가능합니다. 권장하지 않음

.아빠 {오버플로 :숨김; 너비: 100%; } //overflow:auto; 높이:300px;

글이 비교적 간단하고, 쓰는 표현도 거의 없고, 아무리 많은 아이디어를 말해도 모두 코드이고, 실제 코드는 허용되지 않습니다. 사용 후에는 의미를 이해하게 될 것입니다. 행운을 빕니다. .