overflow:hidden清除浮动原理解析及清除浮动经常使用方法总结

最近在看《CSS Mastery》这本书，里面有用overflow：hidden来清理浮动的方法。可是一直想不明白为何可以实现清除浮动，查阅了网络上的解释，下面来总结一下。

1、首先来想一想

咱们你们理解的overflow:hidden是超出该元素的部分进行隐藏。这个时候就须要明确一点，该元素的高度是怎么定义的。当一个div中的两个元素浮动以后，此时div的高度就会塌陷，此时div的高度为0。那是否是意味着就要将浮动元素隐藏起来，若是是真的隐藏就是反布局常识的。因此这中间确定有咱们如今还不知道的机制。

2、不了解的机制-BFC

定义：BFC（Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认状况下只有根元素（body）一个块级上下文，可是若是一个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版彻底独立。

做用：独立的块级上下文能够包裹浮动流，所有浮动子元素也不会引发容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，因此就不用清除浮动来撑起包含块的高度。

3、总结清除浮动的方法

我常常用到的清除浮动的方法有

一、添加额外标签设置clearfix类为clear:both;

　　原理是这个空的div能让父级获取到高度，是由于设置以后这个div的左右都不能有浮动元素，因此这个空的div元素会向下移动，直到换行，而为了让这个div可以换行，父元素至少要包含浮动元素的高度才能提升足够的空间，这样实现清除浮动的影响。

二、设置父元素为浮动元素

三、设置position:absolute

我不经常使用的清除浮动的方法有

一、父级div定义height

三、overflow:hidden

二、父级div定义伪类:after和zoom;

　　这个方法的原理还不理解，欢迎大神解答。

4、清除浮动的影响方法分类

参考张鑫旭老师的说法，清除浮动的说法是不许确的。应该是为清除浮动的影响。我也以为张老师的说法是正确的，由于float:none才叫清除浮动。张老师还说到了包裹的这个概念，根据这个概念将清除浮动的影响的方法分为两大类。

一类是clear:both/left/right，这就不用说了。

另外一类是：包裹清除，由于他发现浮动、绝对定位、inline-block、overflow都有自适应元素宽度的特性，就想到了用包裹来形容。