CSS layout around - Adaptive intermediate

About layout, fixed width to the left, to the right of the adaptive 
common in middle-management interface, the list shows the mobile end Web and so on. 
Method 1: Setting absolute positioning on the left, the right set left margins, equal to the width of the left

        .contain{
            position :relative;
            height: 300px;
        }

        .left{
            position: absolute;
            left: 0;
            top: 0;

            width: 200px;
            height: 300px;
            background: red;
        }
        .right{
            /*使用左外边距*/
            margin-left: 200px;
            height: 300px;
            background: blue;
        } 

Method 2: Set the left left floating, the right to hide overflowing content

　　　　.contain { 
            position: relative; 
            height: 300px by; 
        } 
        .left { a float: left; 
            width: 300px by; 
            height: 300px by; 
            background: Red; 
        } 
        .right { overflow: hidden; // hides content appears outside the parent element 
            background: Blue; 
            height: 300px by; 
        }
            
           

Method 3: Elastic Layout

  　　　　.contain{
           display: flex;
        }
        .left{
            width: 200px;
            height: 200px;
            background: red;
        }
        .right{
            flex: 1;
            height: 200px;
            background:blue;
        }

Method 4 : floating around, the width of the adaptive part is set to be: width: Calc (100% - 200px);

　　     .contain {
            position: absolute;
            
            width: 100%;
            height: 100%;
        }

        .left {
            float: left;
            
            width: 200px;
            height: 100%;
            background-color: #72e4a0;
        }

        .right {
            float: left;
            width: calc(100% - 200px);
            
            height: 100%;
            background-color: #9dc3e6;
        }