overFlow的含义与巧妙使用
一、overFlow意义
overflow：容器（满的）溢出，它有以下取值：
1、visible（默认）溢出部分可见
2、hidden溢出部分隐藏
3、auto适当加入滚动条（当父元素高度固定，内容溢出，设置overflow: auto会出现滚动条）
overflow-x和overflow-y也有这三种取值，分别代表水平或者垂直方向溢出的处理
二、实现案例
1、默认展示
2、当鼠标悬浮在某一卷时，其他的内容隐藏，该卷展开，效果如下：
3、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>金刚经</title>
<style type="text/css">
#{ margin: 0px; padding: 0px;}
section{ width: 800px;height: 460px;margin: auto;}
article{ float: left;width:200px;height: 460px;overflow: hidden;}
h3{ font-size: 16px;font-weight: bold;margin: 10px 50px;}
p{ margin: 10px 50px;}
.chapter_1 { background-color: #A3A3A3;}
.chapter_2 { background-color: #81559d;}
.chapter_3 { background-color: #54709d;}
.chapter_4 { background-color: #4f9d89;}
section:hover>article{
overflow: hidden;
width: 50px;
}
section>article:hover {
width: 650px;
}
</style>
</head>
<body>
<section>
<article class="chapter_1">
<h3>金刚经第一卷</h3>
<p>如是我闻，一时，佛在舍卫国祗树给孤独园，与大比丘众千二百五十人俱。尔时，世尊食时，著衣持钵，
入舍卫大城乞食。于其城中，次第乞已，还至本处。饭食讫，收衣钵，洗足已，敷座而坐。</p>
</article>
<article class="chapter_2">
<h3>金刚经第二卷</h3>
<p>如是我闻，一时，佛在舍卫国祗树给孤独园，与大比丘众千二百五十人俱。尔时，世尊食时，著衣持钵，
入舍卫大城乞食。于其城中，次第乞已，还至本处。饭食讫，收衣钵，洗足已，敷座而坐。</p>
</article>
<article class="chapter_3">
<h3>金刚经第三卷</h3>
<p>如是我闻，一时，佛在舍卫国祗树给孤独园，与大比丘众千二百五十人俱。尔时，世尊食时，著衣持钵，
入舍卫大城乞食。于其城中，次第乞已，还至本处。饭食讫，收衣钵，洗足已，敷座而坐。</p>
</article>
<article class="chapter_4">
<h3>金刚经第四卷</h3>
<p>如是我闻，一时，佛在舍卫国祗树给孤独园，与大比丘众千二百五十人俱。尔时，世尊食时，著衣持钵，
入舍卫大城乞食。于其城中，次第乞已，还至本处。饭食讫，收衣钵，洗足已，敷座而坐。</p>
</article>
</section>
</body>
</html>
