image.png
导致该现象的原因是float产生的浮动，使子元素脱离了文档流，父级元素无法识别到子元素，从而显示为一条直线，
简单意义上来说是清楚浮动，但又不完全是，我们要做到的是对浮动标签的闭合
解决方案
1.<div style='clear:both'></div>
2.在父级元素上添加overflow：hidden
3.<div class="footer">.footer</div>
4.父元素设置 overflow：auto 属性
5.使用 :before和 :after 双伪元素
原理即是BFC：块级格式化上下文。（把原来的块级元素占用的）
正常的父元素与子元素显示
image.png
加上float：left；后显示为
image.png
加上overflow：hidden；后显示为
image.png
此时父级元素的宽度加上了子元素的高度
