本文目录
1. 前言
之前我们讲过了，网页元素会占据一个盒子的空间。如果我们通过width或者height设置了元素的尺寸，那么就确定了元素内容的大小。
如果此时，元素内容太多，超出了我们设置的尺寸，会是什么情况呢。
这就是本节课介绍的溢出，指的就是内容太多，超出元素尺寸的情况。
CSS提供了overflow属性设置溢出时元素的显示方式。
2. 默认显示溢出部分
如果我们不指定overflow，则overflow默认取值为visible，意思是溢出部分显示出来。例如：
<div class="box overflow-visible">
<h3>凉州词</h3>
黄河远上白云间<br>
一片孤城万仞山<br>
羌笛何须怨杨柳<br>
春风不度玉门关<br>
</div>
对应CSS：
.box {
border: 1px solid blue;
height: 100px;
}
.overflow-visible {
overflow: visible;
}
我们通过.box类为元素设置了边框和高度，通过.overflow-visible将元素溢出方式设置为visible，注意默认情况也是该溢出方式。此时效果如下：
可见溢出的部分也显示了出来。
3. 隐藏溢出部分
通过将overflow属性值设置为hidden，可以隐藏溢出部分。
<div class="box overflow-hidden">
<h3>凉州词</h3>
黄河远上白云间<br>
一片孤城万仞山<br>
羌笛何须怨杨柳<br>
春风不度玉门关<br>
</div>
CSS：
.overflow-hidden {
overflow: hidden;
}
效果如下：
4. 显示滚动条
上面两种方式的处理，明显都不够好。第一种内容都跑出来了，第二种直接不让你看溢出的内容了。
我们可以通过将overflow属性值设置为scroll，从而显示滚动条以便查看溢出内容。
<div class="box overflow-scroll">
<h3>凉州词</h3>
黄河远上白云间<br>
一片孤城万仞山<br>
羌笛何须怨杨柳<br>
春风不度玉门关<br>
</div>
CSS代码：
.overflow-scroll {
overflow: scroll;
}
此时效果如下，拖动右侧滚动条即可查看溢出内容。
5. 自动处理
在上面的例子中，内容的宽度并未超过元素宽度，其实没必要显示横向滚动条。此时可以直接将overflow设置为auto，让浏览器自动处理去。
<div class="box overflow-auto">
<h3>凉州词</h3>
黄河远上白云间<br>
一片孤城万仞山<br>
羌笛何须怨杨柳<br>
春风不度玉门关<br>
</div>
CSS代码：
.overflow-auto {
overflow: auto;
}
在IE浏览器下，处理结果如下：
使用Chrome浏览器看看，效果如下：
这两种浏览器都足够智能，只显示了垂直滚动条，但是从样式上看，好像Chrome浏览器更好看一点。
6. 小结
综合上面的实例，设置auto效果最好。