页面上的每个元素都是一个盒子。如果没有设置盒子的高度，那么盒子的高度将随着所需的内容的增大而变大。
overflow属性
有四个值：visible（默认值），scroll，hidden和auto。
scroll值能阻止内容溢出，但会增加出滚动条，通过拉动滚动条可以浏览所有内容。
auto - 如果内容溢出被限制，则会添加一个滚动条，使超出的内容可以通过滚动展示出来。
hidden - 隐藏掉内容溢出的部分，溢出的内容将不可见。
那么问题来了，scroll与auto有什么区别呢？
当文本超出时，overflow:scroll; 与 overflow:auto; 都会出现滚动条。
当文本没有超出元素区域时，overflow:auto; 并不会出现滚动条，
而overflow:scroll; 依旧会显示滚动条。
示例代码：
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background-color: LightBlue;
float: left;
}
#scroll{
background-color: red;
overflow: scroll;
}
#auto{
background-color: green;
overflow: auto;
}
#hidden{
background-color: yellow;
overflow: hidden;
}
</style>
</head>
<body>
<div id="none">
这个文本在div元素里面，它有一个蓝色的
背景颜色，并浮动到左侧。 我们设定一个具体的
div元素的高度和宽度，正如你所看到的，这样会导致文本内容溢出。
</div>
<div id="scroll">
这个文本在div元素里面，它有一个红色的
背景颜色，并浮动到左侧。 我们设定一个具体的
div元素的高度和宽度，并设置overflow为scroll，正如你所看到的，这样会使文本溢出内容可以拖拉展示。
</div>
<div id="auto">
这个文本在div元素里面，它有一个绿色的
背景颜色，并浮动到左侧。
</div>
<div id="hidden">
这个文本在div元素里面，它有一个黄色的
背景颜色，并浮动到左侧。 我们设定一个具体的
div元素的高度和宽度，并设置overflow为hidden，正如你所看到的，这样会导致文本内容的溢出部分被隐藏。
</div>
</body>
</html>
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
