Overflow:hidden清除浮动的工作原理

引用 https://www.cnblogs.com/ympjsc/p/11800472.html 大神的总结
要想彻底清除浮动的影响，适合的属性不是 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 呢？常见的情况如下：

• 根元素；

• float的值不为none；

• overflow的值为auto、scroll或hidden；

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

• position的值不为relative和static。

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