双飞翼布局

#BFC
#子绝父相定位
#flex计算
1.BFC

/* 盒子一 */
        .father1 {
            height: 300px;
            background-color: skyblue;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: lime;
        }

        .right {
            float: right;
            width: 200px;
            height: 300px;
            background-color: lime;
        }

        .center {
            overflow: hidden;
            text-align: center;
            line-height: 350px;

            height: 350px;
            background-color: pink;
        }
```<!--
 BFC(Block Formatting Context)的英文缩写简称，block可以理解为一个简单的盒模型， Formatting Context则为block的上下文渲染环境。其作用是使内部元素的布局不受外部元素影响。

BFC 的功能：

bfc内部元素的布局不受外部元素影响。
bfc区域不会出现margin重叠  （边距塌陷）
bfc区域计算高度时候会自动计算浮动元素。 （清除浮动）
bfc区域不会和浮动元素重合。
BFC使用场合：防止margin出现重叠  解决边距塌陷问题;清除浮动，防止元素塌陷：

如果不给父元素设置一个高度的话，子元素设置浮动后，子元素并不能将父元素的高度自动撑起来，这个时候给父元素设置一个overflow：hidden属性后，就可以起到清除浮动的作用。
     -->
    <div class="father1">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">BFC </div>

    </div>

2.子绝父相定位

/* 盒子二 */
        .father2 {
            height: 200px;
            margin: 210px auto;
            width: 100%;
            position: relative;
        }

        .left2 {
            width: 300px;
            height: 100%;
            background-color: blue;
            position: absolute;
            top: 0;
            left: 0;
        }

        .right2 {
            width: 300px;
            height: 100%;
            background-color: blue;
            position: absolute;
            top: 0;
            right: 0;
        }

        .center2 {
            height: 100%;
            margin: 0 300px;
            background-color: red;
            text-align: center;
            line-height: 200px;
        }
 <!-- 
        1.设置子绝父相  给父盒子设置左右的padding值 作为左右盒子的宽度

    2.给左右盒子设置过padding值 后定位到父盒子的padding处  注意要重合
    
    3.设置中间盒子高度 注意和左右盒子高度岔开   方便测试是否自适应 -->
    <div class="father2">
        <div class="left2"></div>
        <div class="center2">定位子绝父相 </div>
        <div class="right2"></div>
    </div>

3.flex布局

  /* 盒子三 */
        .father3 {
            height: 200px;
            margin: 20px auto;
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .left3,
        .right3 {
            width: 300px;
            height: 100%;
            /* 第一个值是放大的比例 第二个 缩小的比例 第三个大小 */
            flex: 0 0 200px;
            background-color: lightblue;

        }

        .center3 {
            height: 100%;
            flex: 1;
            background-color: yellow;
            text-align: center;
            line-height: 200px;
        }
         
         <!-- 
         1.给父盒子设置 display:flex 布局

        2.左右盒子设置固定宽高
    
       3.给中间盒子设置flex:1 自动填充父盒子剩余的宽高 -->

    <div class="father3">
        <div class="left3"></div>
        <div class="center3">flex的伸缩因子 </div>
        <div class="right3"></div>
    </div>