四、圣杯模型

盒子高矮不同，最终效果所有的盒子高度相同，并且是最高盒子的高度

4.1 原理

margin-bottom：负数 可以改变盒子的浏览器读取高度

overflow：hidden； 盒子溢出隐藏，可以读取子盒子的高度并且以子盒子的高度撑开父盒子高度

.box{
        width: 300px;
        /* 不书写高度 利用overflow读取子盒子高度 */
        background-color: #eee;
        overflow: hidden;   
    }
    .box .son {
        width: 200px;   
        height: 200px;
        background-color: lightblue;
        /* margin-bottom:负值 改变盒子的高度 */
        margin-bottom: -100px;
    }

4.2 圣杯模型

<div class="box">
    <!-- son1宽度20% son2宽度50% son3宽度30% -->
    <p class="son1">1</p>
    <p class="son2">2</p>
    <p class="son3">3</p>
</div>

    .box {
        width: 100%;
        background-color: #eee;
        /* 读取子盒子最大的读取高度并且以这个高度撑开自身 */
        overflow: hidden;
    }
    .box .son1 {
        float: left;
        width: 20%;
        height: 100px;
        background-color: green;
        /* padding-bottom 让盒子变高 */
        padding-bottom: 400px;
        /* margin-bottom 让盒子变矮 */
        margin-bottom: -400px;
    }
    .box .son2 {
        float: left;
        width: 50%;
        height: 200px;
        background-color: red;
        /* padding-bottom 让盒子变高 
    
            margin-bottom 让盒子变矮
            
            一般做法：将盒子padding-bottom margin-bottom设置为 
            数值 >= 该盒子高度和最高盒子高度差值
            */
        padding-bottom: 2000px;
        margin-bottom: -2000px;
    }
    .box .son3 {
        float: left;
        width: 30%;
        height: 300px;
        background-color: blue;
    }