CSS布局 - Overflow

CSS中的overflow属性控制是用来定义内容太大超出范围的处理方式。其取值范围如下：

• visible - 这是默认取值。超出部分不会被裁剪，而是直接超出元素本身的范围。
• hidden - 超出部分会被裁剪掉，汝不会再看到超出的部分。
• scroll - 超出部分会隐藏，但是可以通过滑动滚动条来浏览超出部分内容。（会强制显示滚动条）
• auto - 超出部分会隐藏，但可以通过滚动来浏览超出部分内容。（类似scroll，但更雅观，当需要滚动的时候才会出现滚动条）

不过对于Mac OS X Lion这类苹果公司的电脑操作系统中，取值scroll等价于取值auto，强制显示滚动条这种不雅观的功能在苹果系统中是不能得逞的。总之，尽量用auto属性吧，因为auto的存在，scroll属性可谓就是个鸡肋。

---

重要提示：overflow属性只针对有特定高度的块级元素（block）才会有效。

---

overflow:visible

visible是默认取值。超出部分不会被裁剪，而是直接超出元素本身的范围。

div {
    background-color: #eef8f8;
    width: 200px;
    height: 50px;
    border: 1px dotted #46acb6;
    overflow: visible;
}

运行一下

overflow:hidden

取值hidden，超出部分会被裁剪掉，汝不会再看到超出的部分。

div {
    background-color: #eef8f8;
    width: 200px;
    height: 50px;
    border: 1px dotted #46acb6;
    overflow: hidden;
}

运行一下

overflow:scroll

取值scroll，超出部分会隐藏，但是可以通过滑动滚动条来浏览超出部分内容。（会强制显示滚动条）

div {
    background-color: #eef8f8;
    width: 200px;
    height: 50px;
    border: 1px dotted #46acb6;
    overflow: scroll;
}

运行一下

overflow:auto

取值auto，超出部分会隐藏，但可以通过滚动来浏览超出部分内容。（类似scroll，但更雅观，当需要滚动的时候才会出现滚动条）

div {
    background-color: #eef8f8;
    width: 200px;
    height: 50px;
    border: 1px dotted #46acb6;
    overflow: auto;
}

运行一下

overflow-x 和 overflow-y

如果只想单独设置水平方向或垂直方向上的overflow属性，那使用overflow-x和overflow-y即可。

• overflow-x - 只设置水平方向上的overflow属性
• overflow-y - 只设置竖直方向上的overflow属性

div {
    overflow-x: hidden; /* 隐藏水平方向上滚动条 */
    overflow-y: scroll; /* 添加垂直方向上滚动条 */
}

运行一下