清除浮动方式overflow:hidden原理解析

我们都知道清除浮动可以给父元素添加overflow:hidden来清除浮动，但是其中的原理是什么呢？接下来就写一点个人的理解。

清除浮动原因

我们都知道当元素浮动后，可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

2.清除浮动方式

这里就不一一介绍，这篇文章只对overflow方式做理解。

这种方式主要涉及到一个BFC的理解

二、什么是BFC（Block Formatting Context）及如果利用BFC

这里直接po出官方给的解释： bfc是web页面中盒模型布局的css渲染模式。

通俗地讲，我们写css样式时，对一个元素设置css，我们首先要知道这个元素是块级元素还是行内元素，而bfc就是用来格式化块级盒子的。

Fromatting Context：指的是页面中一块渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

三、BFC的生成

满足下列css声明之一的元素便会生成BFC

1.float的值不为none

2.overflow的值不为visible

3.position的值不为static或relative

4.display的值为inline-block,table-cell,table-caption

5.flex box(元素的diaplay：flex或inline-flex)

四、BFC的布局规则

简单归纳如下：

1.内部元素会在垂直方向一个接一个排列，可以理解为BFC中的一个常规流。

2.元素垂直方向上，同一个BFC的两个相邻盒子的margin会发生重叠

3.BFC区域不会与float元素区域重叠

4.计算BFC的高度，浮动子元素也会参与计算

5.BFC的子元素不会影响到外面的元素

当了解上面介绍的知识后，我们来说overflow：hidden原理

如下：当给父元素添加overflow：hidden后，父元素就就生成了一个BFC块，所以计算父元素高度的时候，根据上面的介绍，BFC的浮动子元素也会参与高度计算，BFC就把浮动的子元素高度当做自身高度去处理溢出，内部的元素不会影响外面的布局，所以外面看是清除了浮动。

4000