摘要：浮動布局絕對布局彈性布局表格布局網格布局全部代碼部分浮動布局通過把多個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的元素類名的順序不限兩者之間無空格例如被選擇的元素浮動解決方案這是三欄布局

.layout.float .left{
                     float: left;
                     width: 300px;
                     background: red;
                 }
                 .layout.float .right{
                     float: right;
                     width: 300px;
                     background: blue;
                 }
                 .layout.float .center{
                     background: yellow;
                 }

.layout.absolute .left-right-center>div {
                     position: absolute;
                 }
                 .layout.absolute .left{
                     left : 0;
                     width : 300px;
                     background : red;
                 }
                 .layout.absolute .center{
                     left : 300px;
                     right : 300px;
                     background : yellow;
                 }
                 .layout.absolute .right{
                     right:0;
                     width:300px;
                     background:blue;
                 }

.layout.flexbox{
                     margin-top : 140px;
                 }
                 .layout.flexbox .left-center-right {
                     display: flex;
                 } 
                 .layout.flexbox .left{
                     width : 300px;
                     background : red;
                 }
                 .layout.flexbox .center{
                     flex : 1;
                     background : yellow;
                 }
                 .layout.flexbox .right{
                     width : 300px;
                     background : blue;
                 }

.layout.table .left-center-right {
                     width : 100%;
                     display : table;
                     height: 100px;
                 }
                 .layout.table .left-center-right>div {
                     display : table-cell;
                 }
                 .layout.table .left {
                     width : 300px;
                     background : red;
                 }
                 .layout.table .center {
                     background : yellow;
                 }
                 .layout.table .right {
                     width : 300px;
                     background : blue;
                 }

.layout.grid .left-center-right {
                     display : grid;
                     width : 100%;
                     grid-template-rows: 100px;
                     grid-template-columns : 300px auto 300px;
                 }
                 .layout.grid  .left{
                     background : red;
                 }
                 .layout.grid  .center{
                     background : yellow;
                 }
                 .layout.grid  .right{
                     background : blue;
                 }

    
        
        
        
    
    
         
         

             
             

                 

                 

                 

                     
浮動解決方案
                     
1、這是三欄布局中間部分
                     
2、這是三欄布局中間部分
                 
             
         
            
         
         

             
                

                    

                    

                    

                        
絕對定位解決方案
                        
1、這是三欄布局絕對定位中間部分
                        
2、這是三欄布局絕對定位中間部分
                        
                    
                
         
        
         
         

             
             

                 

                 

                     
flexbox解決方案
                     
1、這是三欄布局flexbox中間部分
                     
2、這是三欄布局flexbox中間部分
                 
                 
 
             
         

         
         

             
             

                 

                 

                     
表格布局
                     
1、這是三欄布局表格布局中間部分
                     
2、這是三欄布局表格布局中間部分
                 
                 

             
         

         
         

             
             

                 

                 

                        
網格布局
                        
1、這是三欄布局網格布局中間部分
                        
2、這是三欄布局網格布局中間部分