html高度塌陷

高度塌陷：
父元素的高度一般是被子元素或者叫内容撑开的，若设置子元素浮动，则子元素就会脱离文档流
也就撑不开父元素的高度了，从而导致父元素的高度丢失，页面布局混乱
方案一：
设置父元素的高度
这种方式不推荐使用
2、可以利用clear样式清除浮动
在父元素的最后添加一个空白的div，它可以撑开父元素的高度，然后对其清除浮动。这种方式可以清除浮动，但是会在页面中添加多余的结构。
clear属性取值:
​ none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
​ left: 不要找前面的左浮动元素
​ right: 不要找前面的右浮动元素
​ both: 不要找前面的左浮动元素和右浮动元素

3、利用after伪类
可以通过after伪类向父元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个 空白div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用。

footer{
    content: "";
      /*转换为一个块元素*/
      display: block;
      /*清除两侧的浮动*/
      clear: both;
      width: 1250px;
    
    margin: 0 auto;
    border-top: 1px solid rgb(207,207,207);
    
    text-align: center;
    color: rgb(153,153,153);
}