CSS: clear 清除浮动 解决网页中的“塌陷”问题

什么是塌陷
如果父级元素只包含浮动元素,那么在未设置高度的情况下,父级元素的高度塌陷为0;

可以看到在父级元素的高度塌陷为0,只剩下了黑色边框.

解决网页"塌陷"
1.创建一个用来清除浮动的css样式(.clearfix)
2.针对包裹的全是浮动元素的父级容器使用(.clearfix)

.clearfix{zoom:1;}/*zoom属性：IE浏览器专用的属性，为了兼容老版本的IE浏览器使用*/
.clearfix:after{ /*:after 伪对象选择符 --在这个对象被浏览器渲染之后添加一些内容*/
            content: ".";/*content属性 : 添加的内容写在这个属性中,与伪对象同时出现 必须有该属性*/
            display: block;/*将添加的内容转换为块状元素显示*/
            visibility: hidden;/*visibility:可视化属性,控制元素是否可见,始终保留元素的物理空间*/
            height: 0;/*将添加的内容高度设为0,消除占位*/
            clear: both;/*将添加进的对象作为清除浮动的对象,实现外围容器中有内容存在,因此可以自动判断高度*/
        }