H5中消除浮动的方法

在网页开发中通常希望容器的高度自适应(不设置高度)，让子元素把容器的高度撑开，当子元素设置浮动后容器的高度撑不开了，就会发生塌陷问题。

消除浮动的方法:

1.给父元素设置overflow:hidden

2.利用空盒子的方法:在浮动元素的同级下设置一个空的元素，利用clear:both来清除

3.万能清除法，最常用可兼容所有浏览器，

定义一个类名，利用伪元素:after并把类名赋值给被浮动元素的父级元素

clear:after{display:block;clear:both;content=" ";visibility:hidden;height:0;}

clear{zoom:1;}(用于兼容IE浏览器)

①父元素没有高度当子元素不设置浮动时

图片发自App

②当设置浮动之后(父元素高度塌陷)

图片发自App

③清除浮动overflow:hidden;

图片发自App