左固定宽度，右边占据剩余空间的3种方法。

面试遇到这道题，我用flex布局，举一反三：

 <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
    </div>

1. flex :

.parent {
            width: 100%;
            height: 600px;
            display: flex;
            flex-direction: row;
            justify-content: center; 
        }
        
        .left {
            width: 300px;
            height: 100%;
            background-color: pink;
        }
        
        .right {
            height: 100%;
            flex: 1; 
            background-color: yellow;
        }

2. float+calc() (记得 运算符空格 每次都忘记）

.parent {
            width: 100%;
            height: 600px;
        }
        
        .left {
            width: 300px;
            height: 100%;
            background-color: pink;
            float: left;
        }
        
        .right {
            height: 100%;
            float:left;
			width: calc(100% - 300px); 
            background-color: yellow;
        }

3. 利用bfc (这是个好东西，得记录下来）

.parent {
            width: 100%;
            height: 600px;
        }
        
        .left {
            width: 300px;
            height: 100%;
            background-color: pink;
            float: left;
        }
        
        .right {
            height: 100%;
            overflow: hidden;
            /*创建bfc */
            background-color: yellow;
        }

三行布局的思想也差不多：
但注意center得位于right后

<div class="parent">
        <div class="left"></div>

        <div class="right"></div>
        <div class="center"></div>

    </div>

.parent {
            width: 100%;
            height: 600px;
            /* display: flex;
            flex-direction: row;
            justify-content: center; */
        }
        
        .left {
            width: 300px;
            height: 100%;
            background-color: pink;
            float: left;
        }
        
        .center {
            height: 100%;
            overflow: hidden;
        }
        
        .right {
            height: 100%;
            width: 300px;
            float: right;
            /* flex: 1; */
            /* float: left; */
            /* width: calc(100% - 300px); */
            /*创建bfc */
            background-color: yellow;
        }