高度塌陷问题

问题描述：父元素高度自适应，子元素浮动造成父元素高度为0；

 

解决方案：

方案一：给父元素添加     overflow：hidden；

 

方案二：给父元素一个固定的高度。 height：value；    缺点：不灵活，里面的子元素不能高度自适应。

 

方案三：在子元素的末尾添加一个空的div，并设置样式

div{clear:both;height:0;overflow:hidden;}    优点：浏览器兼容性好。   缺点：会添加无意义的代码，容易造成代码冗余。

 

方案四：万能清除浮动法

给父元素添加：after ,实质等价于在子元素的末尾添加一个空的div

父元素：after{

　　　　　　　　clear:both;height:0;overflow:hidden;content:".";display:block;visibility:hidden;

}