溢出、文档流和浮动

1.overflow(溢出)

• visible 默认值。内容不会被修剪，会呈现在元素框之外。
• hidden 内容会被修剪，并且其余内容是不可见的。
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

.box{
    width:100px;
    height:100px;
    background-color:red;
    overflow:visible;
}

2.文档流

• 每个页面都是文档，每个文档也是一个网页
• 块元素在文档流中如果设置宽和高就默认为设置的宽和高,设置padding会影响盒子的大小,如果没设置宽就默认父元素宽的100%，高的话是由内容决定，内容有多高，它就有多高
• 内联元素只占自身的宽和高

3.浮动

.box2{
        width: 100px;
        height: 100px;
        background-color: red;
        /*display: inline-block;*/
        float: left;
    }

• left 元素向左浮动。
• right 元素向右浮动。
• none 默认值。元素不浮动，并会显示在其在文本中出现的位置。

内联浮动

• 所有的内联元素如果脱离文档流就会变成块元素，内联元素是不支持宽和高，如果变成块元素就会生效。