解决盒子容器浮动造成的容器塌陷问题

当我们对div或者其他容器内部的标签使用float属性后，会出现此div下面的其他网页元素跑到此div的顶栏位置，

这是由于使用了float使其父级容器出现了容器塌陷（检查元素是发现容器的高度变为0或者边框的上下像素值和）

解决方法：
1、在使用了float属性的同级容器内部加上一个div，再给这个div加一个style属性clear：both；来清除浮动：

           <div style="clear: both;"></div>

2、增加一个clearfix的css样式：

            .clearfix{zoom: 1;}/*Zoom属性：IE浏览器专用属性，为了兼容IE老版本所写*/
			.clearfix:after{/*：after伪对象选择符:表示该元素在浏览器渲染过后添加指定的内容*/
				content: "指定的内容";/*content属性：配合伪对象选择符的专用属性，必须写，值可以是" ",
				是浏览器渲染之后添加的内容*/
				display: block;/*将添加的元素转换成块状元素*/
				visibility: hidden;/*visibility属性：控制元素的可见性，hidden为不可见，
				即不显示在页面视觉效果中，无论是否显示，都会保留其物理空间。（与display:none;的比较）*/
				height: 0;/*将添加的内容高度设置为0，消除其占位*/
				clear: both;/*将添加进去的内容设置为清除浮动的对象，以实现外围容器之中有内容存在，
				因此可以自动判断高度，解决塌陷问题*/
				}