首先创建两个盒子
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 100px;
height: 300px;
background-color: red;
}
显示如下
此时子元素已经超出了父元素的范围,
/* 通过overflow可以设置父元素如何处理溢出 */
/* -visible,默认值,不会对溢出内容做处理,元素在父元素以外的地方显示*/
/* -hidden ,溢出的内容会被修剪,不会显示 */
/* -scroll, 可以为父元素添加滚动条,可以查看内容*/
1.给父元素添加overflow: scroll;后会产生滚动条
2..给父元素添加overflow: hidden ;后会自动隐藏超出的部分