原标题：关于CSS的clearfix清理浮动
在网上搜索“css解除浮动”后，很多网站都表示“盒解除内部浮动时可以使用. clearfix”。
上图是. clearfix的定义和应用，简单来说就是. clearfix的原理。
在1、ie6、7中，zoom: 1诱发hasLayout，元素封闭内部悬浮。
2 .在标准浏览器下，伪类. clearfix:after通过在应用于. clearfix的元素后插入clear: both的块级元素来清除浮动。
. clearfix的弊端
上面的代码显示，忽略ie6、7， clearfix插入在标准浏览器下
clear: both的元素很可能会消除不必要的浮动。 以下示例：
上面的代码构成了双列布局的页面。
名为menu的菜单有一个边框，但由于menu的li元素位于左侧，因此menu没有高度，可以使用. clearfix消除. menu内部的浮动。 代码如下。
.重建clearfix
在上面的错误之后，分析除了. clearfix:after这一方式以外，是否还有去除元素内部浮动的方法。
. clearfix的display值可以设置为table-cell、table-caption或inline-block，但display: inline-block会产生额外的空白，因此不包括在内。
剩下的只有table-cell、table-caption。 为了保证兼容性，可以在display: table中使. clearfix形成块格式化上下文。 因为display3360table会制作匿名的箱子。
其中一个匿名框(显示值为table-cell )形成块形成上下文。 这样，我们的新. clearfix就会关闭内部元素的浮动。
下面是重构后的. clearfix。
责任编辑：