解决高度塌陷的三种方法

1.父元素添加overflow：hidden

2.添加空标签（块元素）

p{clear:both}

<p></p>

3.万能清除法

css文件

.clearfix {
            zoom: 1
        }

        .clearfix:after {
            content: "";
            display:block;
            clear: both;
            height: 0;
            /* 指定的元素不显示，但是这个属性设定后元素的宽度高度还是要占，只是看不见而已。*/
            visibility: hidden;
        }

html文件

<div class="clearfix">
        <p>1</p>
        <p>2</p>
    </div>