解决盒子容器浮动造成的容器塌陷问题
当我们对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;/*将添加进去的内容设置为清除浮动的对象,以实现外围容器之中有内容存在,
因此可以自动判断高度,解决塌陷问题*/
}