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