HTML的高度塌陷第一种-高度塌陷产生原因：父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起

第一种-高度塌陷

产生原因：父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷，父元素的高度一旦塌陷,所有标准流中元素的位置将会上移，导致整个页面的布局混乱

解决方法一：开启父元素的BFC

<style>
        #box1{
            border: 1px solid red;
            /*开启BFC*/
            overflow: hidden;
        }

        #box2{
            width: 100px;
            height: 200px;
            background-color: royalblue;

            float: right;
        }

        #box3{
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    <div id="box3">212121</div>
</body>

解决方法二：在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动

<style>
        #box1{
            border: 1px solid red;
        }

        #box2{
            width: 100px;
            height: 200px;
            background-color: royalblue;

            float: right;
        }

        #box3{
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
        //增加一个空白div
        <div style="clear: both;"></div>
    </div>
    <div id="box3">212121</div>
</body>

解决方案三：使用after伪类，向父元素后添加一个块元素，并对其清除浮动

 <style>
        #box1{
            border: 1px solid red;
        }

        #box2{
            width: 100px;
            height: 200px;
            background-color: royalblue;

            float: right;
        }

        #box3{
            height: 100px;
            background-color: green;
        }

        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="box1" class="clearfix">
        <div id="box2"></div>
    </div>
    <div id="box3">212121</div>
</body>

第二种-高度崩塌

产生原因：子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素

<style>
        #box1{
            border: 1px solid red;
        }
        #box2{
            width: 100px;
            height: 200px;
            background-color: royalblue;
            float: right;
        }
        #box3{
            height: 100px;
            background-color: green;
        }
        #box4{
            width: 400px;
            height: 400px;
            background-color: purple;
        }
        #box5{
            width: 100px;
            height: 100px;
            background-color: yellow;
            /*子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素*/
            margin-top: 100px;
        }

        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }


    </style>
</head>
<body>
    <div id="box1" class="clearfix">
        <div id="box2"></div>
    </div>
    <div id="box3">212121</div>

    <div id="box4" class="clearfix">
       <!-- <table></table>-->
        <div id="box5"></div>
    </div>
</body>

总结：方法二和方法三原理一样，不过方法三省去了向页面添加结构的问题