overflow+文档流
子元素默认是存在父元素的内容区，理论上讲子元素的最大可以等于父元素内容区大小，
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容
父元素默认是将溢出的内容在父元素外边显示
通过overflow可以设置父元素如何处理溢出内容
可选值：
visible 默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
hidden 溢出的内容，会被修剪，不会显示
scroll 会为父元素添加滚动条，通过拖动滚动条来查看完整内容，无论内容是否溢出，都会添加水平和垂直双方向的滚动条
auto 根据需求自动添加滚动条，需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 </script> 9 10 <style type="text/css"> 11 .box{ 12 background-color: #bfa; 13 display: block; 14 width: 200px; 15 height: 200px; 16 overflow: auto; 17 } 18 .box2{ 19 display: inline-block; 20 width: 400px; 21 height: 400px; 22 background-color: aquamarine; 23 } 24 25 </style> 26 27 </head> 28 <body> 29 30 <div class="box"> 31 <div class="box2">容，我们称为溢出的内容 32 33 父元素默认是将溢出的内容在父元素外边显示 34 35 通过overflow可以设置父元素如何处理溢出内容 36 37 可选值： 38 39 visible 默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示 40 41 hidden 溢出的内容，会被修剪，不会显示 42 43 scroll 会为父元素添加滚动条，通过拖动滚动条来查看完整内容，无论内容是否溢出，都会添加水平和垂直双方向的滚动条 44 45 auto 根据需求自动添加滚动条，需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加 46 47 </div> 48 </div> 49 </body> 50 </html>
文档流
处在网页的最低层，它表示的是一个页面中的位置
我们创建的元素都处在文档流中
元素在文档流中的特点
块元素
1.独占一行，自上向下排列
2.在文档流中的默认宽度是100%，，默认值是auto
当元素的高度或宽度的值为auto，此时指定内边距不会影响可见框的大小，而是会自动修改宽度和高度，以适应内边距
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.在文档流中只占自身的大小，会默认从左到右排列，如果一行中占不下，会换到下一行，继续自左向右
