1 <!-- CSS元素溢出：当子元素的尺寸超过父元素时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overfl属性来设置的。
2 overflow的设置项：
3 1、visible默认值：内容不会被修剪，会呈现在元素框之外
4 2、hidden：内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动，margin-top塌陷的功能
5 3、scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容，不管会不会溢出都会有滚动条显示。
6 4、auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容。
7 5、inherit：规定应该从父元素继承overflow属性的值。 -->
8 <!DOCTYPE html>
9 <html lang="en">
10 <style type="text/css">
11
12 .box{
13 width: 300px;
14 height: 200px;
15 border: 1px solid #000;
16 background-color: gold;
17 line-height: 30px;
18 margin: 50px auto 0; /* 这时候会产生元素溢出 */
19 overflow: hidden; /* 将多余的直接剪除 */
20 overflow: scroll; /* 将多余的内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 */
21 overflow: auto
22 }
23 </style>
24 <head>
25 <meta charset="UTF-8">
26 <title>Document</title>
27 </head>
28 <body>
29 <div class="box">CSS元素溢出：当子元素的尺寸超过父元素时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overfl属性来设置的。
30 overflow的设置项：
31 1、visible默认值：内容不会被修剪，会呈现在元素框之外
32 2、hidden：内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动，margin-top塌陷的功能
33 3、scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。
34 4、auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容。
35 5、inherit：规定应该从父元素继承overflow属性的值。</div>
36 </body>
37 </html>
