溢出是什么？

一个父元素在未设置宽高的情况下自身尺寸由子元素决定（块级元素宽度等于父元素宽度），一个很形象的比喻就是元素被其子元素撑开了。在父元素设置了宽高或宽高受限的情况下，子元素的尺寸超过了父元素的尺寸就会造成溢出。

溢出控制

overflow 属性可以设置当一个元素发生溢出时应该怎么处理，有以下取值：

visible：默认值，内容不会被裁剪，依旧显示在元素之外。
hidden：内容将会被裁剪。
scroll：总是显示滚动条，且内容在溢出下将会被裁剪。
auto：只有在溢出情况下才会显示滚动条。

与很多属性样式类似， overflow 同样是 overflow-x （水平溢出控制）、 overflow-y （垂直溢出控制）的缩写。

/* 水平与垂直都为 hidden */
overflow: hidden;
/* 水平方向为 hidden、 垂直方向为 scroll */
overflow: hidden scroll;
/* 水平方向为 auto */
overflow-x: auto;
/* 垂直方向为 hidden */
overflow-y: hidden;