overflow: hidden的用法

overflow: hidden常用于父元素上。当子元素的内容超过了父元素的大小时，子元素的内容会被修剪。最基本的用法就是溢出隐藏。

overflow属性的基本用法

overflow 属性规定当内容溢出元素框时发生的事情。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

以下这个例子将说明overflow:hidden可以解决溢出隐藏和外边距塌陷的问题。
默认情况是overflow:visible：

<div style="width: 100px; height: 100px; background:blue;">
	<div style="width: 150px; height: 150px; background: red; 
	margin-top: 50px; margin-left: 50px;"></div>
</div>
<div style="width: 100px; height: 100px;
 margin-top: 20px; background: yellow;"></div>

效果图：

在蓝色的div后加入overflow:hidden以后，效果图：

在蓝色的div后加入overflow:scroll之后，效果图：

可以看到：蓝色的父元素内部有子元素，如果给子元素添加margin-top样式，那么父元素也会跟子元素下来，造成外边距塌陷，而overflow:hidden可以解决这个问题，它可以使子元素的margin-top是相对于父元素的边距，而不是父元素与子元素同时移动产生的边距。

清除浮动

如下代码：

<div style=" background:blue; border: 5px solid; ">
     <div style="width: 150px; height: 200px; background: red; float: left;"></div>
     <div style="width: 300px; height: 100px; background: green; "></div>
</div>
<div style="width: 100px; height: 100px; margin-top: 20px; background: yellow;"></div>

效果图：

在父元素蓝色块加入overflow:hidden之后的效果图：

由于红色的块是浮动元素，脱离了文档流，导致它的父元素无法包住这个浮动的子元素，但加入overflow:hidden之后，清除了浮动，使父元素也可以包住浮动元素了。这是因为当给父元素设置``overflow:hidden`时，实际上创建了一个超级属性BFC，由于“BFC布局规则”：计算BFC的高度时，浮动元素也参与计算。因此，父元素在计算其高度时，加入了浮动元素的高度，所以也就实现了清除浮动的目标，所以父元素就包裹住了子元素。

BFC

BFC（Block Formatting Context：块级格式化上下文）就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
BFC布局规则特性：

1. 在BFC中，盒子从顶端开始垂直地一个接一个地排列.
2. 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
4. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
5. 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
触发（创建）BFC：

1. float属性不为none
2. position为absolute或fixed
3. display为inline-block, table-cell, table-caption, flex, inline-flex
4. overflow不为visible。

参考文章：

1. 关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
2. 为什么"overflow:hidden"能清除浮动的影响
3. BFC