浅谈overflow的属性之间区别

根据菜鸟网文档里面显示
overflow属性有四个值(除开继承inherit)：visible (默认), hidden, scroll, 和auto。下面先展示一下几个属性的效果。

visible (默认)：超出内容不会被隐藏，会呈现在元素框之外。

hidden：内容会被剪切，超出元素框的内容被隐藏。

scroll：超出元素框内容会被隐藏，但是浏览器会显示滚动条以便查看其余的内容（不管内容超没有超出元素框，滚动条都会存在）。
auto：如果有内容超出元素框时候，内容会被隐藏，但是浏览器会显示滚动条以便查看其余的内容。
有的朋友可能会发现scroll的效果不是跟auto的效果一样。其实scroll跟atuo的区别是在，scoll不管内容超没有超出元素框，滚动条都会存在。

只有向右超出的时候，auto只有左右滚动条，没有上下滚动条，但是scroll却还是左右跟上下的滚动条都存在。

当overflow：hidden；不仅仅只用于超出内容隐藏，它还有其他的作用。
这里要解释一下BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，规定了内部的块级元素怎么布局。

BFC布局规则：

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的左外边缘（margin-left)， 与包含块的左边（contain box
   left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

怎么创建一个BFC：

 1. 根元素
 2. 浮动 (元素的 float 不是 none)
 3. 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
 4. 非块级元素具有 display: inline-block，table-cell, table-caption, flex,  inline-flex
 5. 块级元素具有overflow ，且值不是 visible

所以当overflow：hidden；相对于创建了BFC。

1.清除浮动:

可以看到父元素section没有给高度，因为2个div元素左浮动，受浮动的影响，导致父元素section的高度塌陷。

当给父元素section加上 overflow: hidden;使其形成BFC的时候，根据上面BFC布局规则第6条，计算高度时就会计算float的元素的高度，达到清除浮动影响的效果。

2.防止垂直方向margin(外边距)合并:

我给子元素的上外边距加了100像素的距离，但是因为外边距合并的问题，子元素带着父元素一起向下移动了100像素

当给父元素加上 overflow: hidden;使其形成BFC的时候，根据上面BFC布局规则第5条，BFC是一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
今天就说到这里，在下有说的不对的地方，欢迎大佬们指正和补充，谢谢各位