Several ways to adjust the layout of a page

1. Using floating layouts
Pros: Compatibility is better.
Cons: After floating, the element is out of the document flow and needs to be handled carefully to clear the floating and floating elements and the relationship between the surrounding elements

<! DOCTYPE html>
Note: The most important thing to note is that the middle column must be placed in the left and right two columns behind!!!

 2. Using an absolute positioning layout 
 Advantage: The layout is relatively fast 
 disadvantage: The positioned element is out of the document flow, meaning its child elements are also out of the document flow, so the usability of this method is relatively poor 
 

<! DOCTYPE html>
3. Using Flex layouts

Pros: A good solution to the disadvantages of floating and absolute positioning, now the mobile is basically a flex layout
Flex is not supported under IE8

<section class= "Layout flex" >  <style>  layout.flex left-right-center{   Display:flex;   margin-top:140px;  } . Layout.flex. left{  flex:0 0 300px;  width:300px;  background:red; }. Layout.flex. right{  flex:0 0 300px;  width:300px;  Background:blue; }. Layout.flex. center{  flex:1;  Background:yellow; } </style>  <article class= "Left-right-center" >   <p class= "left" ></p>   <p class= "center" >    
Note: The middle column should be placed in the middle!!!

4. Using the table layout
Pros: Compatibility is good
Disadvantage: One column content height increases, the other two columns of height will also increase, sometimes we do not need them to increase at the same time, not conducive to search engine crawling information;

<!--table Layout solution--><section class= "layout table" ><style>.layout.table. left-right-center{width:100% ;d isplay:table;height:100px;}. Layout.table. left{display:table-cell;width:300px;background:red;}. Layout.table. Right{display:table-cell;width:300px;background:blue;}. Layout.table. Center{display:table-cell;background:yellow;} </style><article class= "Left-right-center" ><p class= "left" ></p><p class= "center" > 
5. Grid Layout

<!--Grid Layout solution--><section class= "Layout grid" ><style>.layout.grid. left-right-center{width:100%; display:grid;grid-template-rows:100px;grid-template-columns:300px auto 300px;}. Layout.grid. left{background:red;}. Layout.grid. Right{background:blue;}. Layout.grid. Center{background:yellow;} </style><article class= "Left-right-center" ><p class= "left" ></p><p class= "center" > 
If the height is known to be removed or the height exceeds
1.flex layout height can be adaptive
2. Table layout Audou can be adaptive
3. Floating, absolute positioning, grid layout can not be adaptive height