当一个元素的空间有限装不下其它元素(溢出)的时候该怎么办呢？

是隐藏呢是修剪呢还是滚动呢，css overflow可以解决这样的问题。

语法

overflow：value;

属性值

value可能的值：

属性值说明
visible
默认值。内容不会回修剪，可以呈现在元素框之外。
hidden如果内容超出父级容器，超出部分将会被隐藏
scroll
无论是否超出容器，都会出现一个滚动条。
auto如果没有超出容器的显示，将会正常显示，如果超出，将会出现一个滚动条。

例子

<!DOCTYPE html>
<html>
<head>
		<title>css overflow 属性</title>
<style>
div.scroll {
    background-color: #00ffff;
    width: 100px;
    height: 100px;
    overflow: scroll;
}

div.hidden {
    background-color: #00FF00;
    width: 100px;
    height: 50px;
    overflow: hidden;
}
div.auto {
    background-color: orange;
    width: 100px;
    height: 50px;
    overflow: auto;
}
</style>
</head>
<body>
<p>yxjc123.com overflow属性例子</p>
<p>overflow:scroll</p>
<div class="scroll">无论是否超出容器，都会出现一个滚动条。</div>
<p>overflow:hidden</p>
<div class="hidden">如果内容超出父级容器，超出部分将会被隐藏</div>
<p>overflow:auto</p>
<div class="auto">如果没有超出容器的显示，将会正常显示，如果超出，将会出现一个滚动条。</div>
</body>
</html>
效果如图所示：

css overflow 溢出属性

overflow失效

失效的原因可能有：

1. 使用了行内元素或者让元素变为行内元素 display:inline;
2. 没有溢出，尺寸过大。