用overflow:hidden来清除浮动的方法-原理解析及清除浮动常用方法总结

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

一、首先来想想

我们大家理解的overflow:hidden是超出该元素的部分进行隐藏。这个时候就需要明确一点,该元素的高度是怎么定义的。当一个div中的两个元素浮动之后,此时div的高度就会塌陷,此时div的高度为0。那是不是意味着就要将浮动元素隐藏起来,如果是真的隐藏就是反布局常识的。所以这中间肯定有我们现在还不知道的机制。

二、不了解的机制-BFC

定义:BFC(Block Formatting Context)全称是块级格式化上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式,就会为这个块级元素生产一个独立的块级上下文,使这个块级元素内部的排版完全独立。

作用:独立的块级上下文可以包裹浮动流,全部浮动子元素也不会引起容器高度塌陷,就是说包含块会把浮动元素的高度也计算在内,所以就不用清除浮动来撑起包含块的高度。

三、总结清除浮动的方法

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

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

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

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

3、设置position:absolute

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

1、父级div定义height

3、overflow:hidden

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

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

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

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

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

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

1、若侵权,请提供相关必要证明,否则不予回复!
2、若无特殊注明,本文皆为作者原创,商业转载请联系作者授权,非商业转载请注明出处。
3、本站所发布的资源仅用于交流、学习!商业源码若无授权请勿使用,违者所造成的后果与本站无关!

蜗霸 » 用overflow:hidden来清除浮动的方法-原理解析及清除浮动常用方法总结

分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏