1.子元素浮动导致父元素高度(父元素坍塌)
未设置高度的父元素中，如果有子元素浮动(float)，由于子元素不占据页面空间，经常会出现父元素坍塌的问题，如下图：
图片浮动
2.解决方案：
方案1: 让父元素浮动
float: left;
方案2: 使用clearfix 黑魔法，设置父元素 BFC (blocking formatting content)
浮动的元素都会生成一个BFC（块）
overflow: auto;
最新的定义方法:
display: flow-root;
方案3: 在父元素末尾中设置一个清除浮动的块级元素占位
<div style="clear: both"></div>
或者
<span style="display: block;display: block"></span>
方案4: 利用伪类 :after
.outer:after{
content: '020';
display: block;
clear: both;
visibility: hidden;
height: 0; }
方案5: 利用伪元素 ::after
.outer::after{
content: '020';
display: block;
clear: both;
visibility: hidden;
height: 0; }
