css清除浮动方法总结

一、伪元素清除浮动

1 .clearfix:after{
2     content: "";
3     display: table;
4     clear: both;
5 }

为什么选择display:table

构成Block Formatting Context的方法有下面几种：

1. float的值不为none（脱离文档流）
2. overflow的值不为visible。
3. display的值为table-cell, table-caption, inline-block中的任何一个。
4. position的值不为relative和static（脱离文档流）

应用了.clearfix和.menu的菜单极有可能是多级的，所以overflow: hidden或overflow: auto也不满足需求（会把下拉的菜单隐藏掉或者出滚动条）

display: inline-block会产生多余空白，所以也排除掉

剩下的table-cell, table-caption，为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context

display: table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会形成Block Formatting Context

这样我们新的.clearfix就会闭合内部元素的浮动

二、空标签清除浮动

三、父元素设置高度，避免坍塌

四、父元素设置overflow:hidden;

设置overflow:hidden，构成了BFC

同理，父元素脱离文档流也会清除浮动

css清除浮动方法总结

原文：http://www.cnblogs.com/luvx/p/5833553.html