CSS overflow 属性
CSS Overflow 属性
CSS overflow 属性用来控制元素内容溢出时候的处理方法。
基本语法
overflow: visible | hidden | scroll | auto;
取值解释
visible默认值，内容不裁剪，允许溢出边框。hidden裁剪边框外的内容。scroll显示滚动条，不管是否需要。auto根据需要显示滚动条。
适用对象
overflow 属性适用于所有的块级元素、行内块级元素和多个其他元素的伪元素。但是，对于 table 元素来说，这个属性值只有在应用于 table 的标签上的时候才是有效的，对于 table 相关的标签，如 table-box、table-row、table-cell 等都是不支持 overflow 属性的。
overflow-x 和 overflow-y
除了 overflow 属性外，CSS 3 引入了 overflow-x 和 overflow-y 来分别指定横向和纵向的溢出内容。这两个属性可单独使用。
使用技巧
溢出内容没有必要时使用 hidden
当元素内的内容明显超出它的边框时，使用 overflow: hidden; 可以把超出边框的内容隐藏掉。
示例代码：
<style>
.box {
width: 300px;
height: 100px;
overflow: hidden;
}
</style>
<div class="box">
<p>这里是一些超出边界的内容。</p>
</div>
滚动条根据需要自动显示
应用 overflow: auto; 可以使得只有在内容超出元素边界时才会出现滚动条，避免了无用的滚动条的出现。
示例代码：
<style>
.box {
width: 300px;
height: 100px;
overflow: auto;
}
</style>
<div class="box">
<p>这里是一些较短的内容。</p>
</div>
<div class="box">
<p>这里是一些非常长的内容，需要自动显示滚动条。</p>
</div>
使用滚动条
当元素内的内容高度或宽度超出元素设置的高度或宽度时，我们可以使用 overflow: scroll;，此时会自动出现滚动条，无需等待元素发生溢出。
示例代码：
<style>
.box {
width: 300px;
height: 100px;
overflow: scroll;
}
</style>
<div class="box">
<p>这里是一些非常长的内容，需要自动显示滚动条。</p>
</div>
用于清除浮动的盒子
我们经常使用 overflow:hidden 清除浮动。实际上当 overflow 值非visible时，都会启动BFC。且 BFC 会阻止盒子的外侧的margin合并。
示例代码：
<style>
.parent {
overflow: hidden; /* overflow值不必是hidden，只要不是visible就行 */
}
.box {
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
}
</style>
<div class="parent">
<div class="box" style="background: red;"></div>
<div class="box" style="background: blue;"></div>
<div class="box" style="background: yellow;"></div>
</div>