在本教程中，我们将学习CSS溢出。

溢出

当我们想添加滚动条或者将内容剪切到元素内时，我们使用overflow属性。

溢出仅适用于指定高度的块元素。

以下是我们可以使用的值。

• visible 可见-这是默认值，内容显示在元素外部，并且不会剪切内容。

• auto 自动-如果内容超过元素高度，则添加滚动条。

• hidden 隐藏-将隐藏超出元素高度的内容。

• scroll-如果内容超过元素高度，这将添加滚动条。

overflow : visible

在以下示例中，我们将div(具有id mycontainer)的overflow属性设置为visible。
我们已经设置了元素的宽度和高度，并编写了更长的文本，因此多余的内容将显示在元素外部。

div#mycontainer {
	overflow : visible;
	height : 100px;
	width : 300px;
	padding : 15px;
	background-color : #eee;
}

overflow : auto

在以下示例中，我们将div(具有id mycontainer)的overflow属性设置为auto。
我们已经设置了元素的宽度和高度，并编写了更长的文本，因此滚动条将添加到元素(如果需要)。

div#mycontainer {
	overflow : auto;
	height : 100px;
	width : 300px;
	padding : 15px;
	background-color : #eee;
}

overflow : hidden

在以下示例中，我们将div(具有id mycontainer)的overflow属性设置为hidden。
我们已经设置了元素的宽度和高度，并编写了更长的文本，由于隐藏的值，将不会显示额外的内容，也不会添加滚动条。

div#mycontainer {
	overflow : hidden;
	height : 100px;
	width : 300px;
	padding : 15px;
	background-color : #eee;
}

overflow : scroll

在下面的示例中，我们将div(具有id mycontainer)的overflow属性设置为滚动。
我们已经设置了元素的宽度和高度，并编写了更长的文本，由于滚动值的缘故，滚动条将被水平和垂直添加。

div#mycontainer {
	overflow : scroll;
	height : 100px;
	width : 300px;
	padding : 15px;
	background-color : #eee;
}

overflow-x

我们对水平滚动条使用overflow-x属性。

overflow-y

我们对垂直滚动条使用overflow-y属性。

在以下示例中，我们设置了div(具有id mycontainer)的overflow-x和overflow-y属性。

div#mycontainer {
	overflow-x : auto;
	overflow-y : scroll;
	height : 100px;
	width : 300px;
	padding : 15px;
	background-color : #eee;
}