css中:overflow:hidden清除浮动的原理

要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow。

一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响。

1. 前言:

我们都知道overflow:hidden的字面意思是超出隐藏,说到这个超出隐藏就跟父元素的高度有关了,高度一定了的时候,超出隐藏才有依据。

我们知道当子元素开始浮动了,会脱离文档流,其父元素的高度就会变为0,这个时候页面其他元素就会向上占据位置,就会导致页面混乱。

这个时候我们在父元素设置overflow:hidden,就解决了页面混乱的问题。

2. overflow:hidden作用机制BFC:

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

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

那什么时候会触发 BFC 呢?常见的情况如下:

• <html>根元素;

• float的值不为none;

• overflow的值为auto、scroll或hidden;

• display的值为table-cell、table-caption和inline-block中的任何一个;

• position的值不为relative和static。

(以上主要是对张鑫旭老师的《css世界》以及其他作者的观点的做的知识梳理)

上一篇:数组高级:排序和查找


下一篇:为什么overflow:hidden能达到清除浮动的目的?