<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/*
子元素默认是存在于父元素的内容区中，
理论上讲子元素的最大可以等于父元素内容区大小
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位子显示
超出父元素的内容，我们称为溢出的内容
父元素默认是将溢出的内容，在父元素外边显示，
通过overflow可以设置复原乳和处理溢出的内容：
可选值：
- visible 默认值，不会对溢出内容做处理，元素会在父元素以外的位子显示
- hidden 溢出的内容，会被修剪，不会显示
- scroll 会为父元素添加滚动条，通过拖动滚动条来查看完整内容
- 该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
- auto 会根据需求自动添加滚动条
需要水平就添加水平
需要垂直就添加垂直
都不需要就都不加
*/
overflow: hidden;
}
.box2 {
width: 100px;
height: 500px;
background-color: red;
}
</style>
</head>
<div class="box1">
<div class="box2"></div>
</div>
</html>
