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

It’s an old story, CSS is not fixed to adapt to the layout. Whether it is an interview or in daily work, this layout form has been used all the time. It is very common, so today I will take it out and chat about it, not only to give myself a preparation Forgetting to save is also a reference for learning and consolidation. Knowing that everyone knows it, you still need to memorize it, for no other reason than to lay a solid foundation.

There is too much to say, just go to the code and you will understand it at a glance. Maybe you will dismiss it as simple, but I like to write something. . . . . . As a rookie, you have to study hard from the basics.

There are many methods. If you have new methods to add, thank you! !

1. Fixed layout on the left and adaptive layout on the right

   <div class="whole">
        <p>自适应测试</p>
           <div class="left">固定左侧 300px</div>
        <div class="right">右侧自适应</div>
 </div>

Method 1: Use float to float on the left to give a fixed width. The distance of the left margin on the right == the width of the left layer

　　CSS code:

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

Method 2: Absolute positioning on the left, the code on the right has not changed or the distance of the left margin on the right == the width of the left layer;

CSS code:

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

Method 3 (personal preference): Use absolute positioning on both the left and right sides absolute, parent relative definition (does not affect, it is recommended to add a relative definition to avoid overlap)

　css code:

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

2. The layout on the left is not fixed, the layout on the right is fixed ----- the method is the same, just change the position

   <div class="whole">
        <p>自适应测试</p>
           <div class="left">左侧自适应</div>
        <div class="right">右侧宽度固定</div>
  </div>

Method 1. Use left float on the left side, and the right margin == the negative value of the width of the right layer (because you are spreading it to the left, so the distance from the right layer is good), and the right side has float and fixed width

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

Method 2, use absolute positioning on both left and right sides, relative definition of the parent (does not affect, it is recommended to add a relative definition to avoid overlap)

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

Method 3,

The method of clearing floats will be mentioned in one stroke, it will

1 , define a separate layer below the floating layer

2. Pseudo-class method: after (used on the layout layer of the parent class) - commonly used

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

3. Parent element setting overflow For hidden or auto, fixed height is also possible - not recommended

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