CSS implements left (right) side fixed width, right (left) side width adaptive---clear float

The old saying long talk, the CSS of the non-fixed layout, whether it is the interview or in peacetime work, such layout has been used, very common, so today I took out in a nagging, not only to own a memo storage, but also a learning to consolidate the reference, know everyone will, or to remember, not for other, To lay a good foundation.

Say too much, directly on the code, a look can understand. Maybe you'll be dismissive of the simple, but I like to write some ... As a rookie, we must study hard from the basic.

There are many ways to do this, and you have new ways to add notes, thanks here!!

One, the left layout fixed, the right adaptive layout

           
Adaptive testing
           Fixed left 300px        

Method 1: Float to the left with float, to fixed width, distance to right left margin = = width of left layer

CSS code:

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

Method 2: The left absolute positioning absolate, the right code does not change or the right side of the distance = = left side of the width of the layer;

CSS code:

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

Method 3 (Personal preference): the left and right sides are used absolute positioning absolute, the parent relative definition (does not affect, proposed to add a relative definition, avoid overlapping)

CSS code:

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

Second, the left layout is not fixed, the right layout fixed-----method Consistent, position to replace just

           
Adaptive testing
           Left adaptive        right width fixed  

Method 1, left with left floating, right margin = = Right Layer width negative value (because you are left open, distance from the right side of the good layer), the right side of the floating, fixed width

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

Method 2, the left and right sides are used absolute positioning absolute, the parent relative definition (does not affect, proposed to add a relative definition, avoid overlapping)

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

Method 3,

The way to clear floats is to take a stroke, and it will

1. Define a layer separately below the floating layer. clear{Clear:both}

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

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

3, parent element set overflow to hidden or auto, fixed height also can--not recommended

        . Father{overflow:hidden; width:100%;}  Overflow:auto; height:300px;

