解决高度塌陷的方法

高度塌陷形成的原因

　　由于父元素未设置高度，其内子元素由于浮动、固定定位、绝对定位等原因脱离标准文档流，无法撑开父元素，导致父元素高度为0，形成高度塌陷。

解决办法

1.给父元素设定具体高度。

　　缺点：不一定每次都知道具体高度

2.给父元素增加属性 overflow：hidden。形成BFC

　　缺点：会让真正溢出的内容无法显示

3.在浮动子元素的后面增加一个空的块级元素，不设宽高，给定属性 clear：both。清除浮动的影响。

　　缺点：页面不美观，后期容易被删除

4.父元素利用伪元素::after。清除浮动::afte{content:"";display:block;clear: both;height:0;overflow: hidden;visibility: hidden;}