首先我们要知道clear:both是清除浮动的关键。
（推荐教程：css快速入门）
clear是CSS中的定位属性，规定元素的哪一侧不允许其他浮动元素。那么clear:both就是规定在左右两侧均不允许浮动元素。
clear属性只能在块级元素上其作用，这就是清除浮动样式中display:block的作用。
另外visibility: hidden;height: 0;只要content的值为空，写不写都无所谓。
立即学习“前端免费学习笔记（深入）”；
那么为什么要清除浮动，最常见的是因为外层容器高度坍塌，代码演示：
为了显示清楚一点，在.wrap:after 样式中的content设置为content: 'after伪元素' ,此时如下图所示。
X-Node企业快速建站1.0.6.0801
下载
特色介绍： 1、ASP+XML+XSLT开发，代码、界面、样式全分离，可快速开发 2、支持语言包，支持多模板，ASP文件中无任何HTML or 中文 3、无限级分类，无限级菜单，自由排序 4、自定义版头（用于不规则页面） 5、自动查找无用的上传文件与空目录，并有回收站，可删除、还原、永久删除 6、增强的Cache管理，可单独管理单个Cache 7、以内存和XML做为Cache，兼顾性能与消耗 8、
随后在.wrap:after 样式中加上clear:both,表明after伪元素左右两侧均不允许浮动元素，没办法只好把after伪元素放在下面，此时如下图所示。
顺带撑起了.wrap父元素的高度，这样就相当清除了浮动了，解决了外层容器高度坍塌的问题。
那么我们把.wrap:after 样式中的content设置为content:' ',最后就如下图所示。
