CSS属性overflow详解（auto hidden）

overflow用在什么地方

overflow 属性规定当内容溢出元素框时发生的事情。

overflow有哪些属性值？

1. visible 默认值。内容不会被修剪，会呈现在元素框之外。
2. hidden 内容会被修剪，并且其余内容是不可见的。
3. scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4. auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5. inherit 规定应该从父元素继承 overflow 属性的值。

overflow：auto清除浮动的用法

当一个父容器里面的子元素都浮动之后，子元素的高度将被忽略，所以父容器的高度不会被子元素撑高（除非另外设定高度）。
但是，当给父元素加上一个overflow：auto。
这样就使父容器高度自适应。
举个栗子：

//HTML
<div class="box1">
      <div class="box2">
     </div>
</div>


//CSS	
.box1 {
     background:#bbb;
}

.box2 {
     width:300px;
     height:200px;
     border:2px solid red;
}

如图：

子元素添加浮动之后

.box1 {
    background:#bbb;
    border-bottom: 3px solid green;
}

.box2 {
    width:300px;
    height:200px;
    border:2px solid red;
    float:left;
}

给父元素添加overflow：auto；父元素就会高度自适应

	
.box1 {
     border-bottom:: 2px solid green;
     overflow:auto;
}