CSS的overflow属性及清除浮动

Overflow

值:          visible | hidden | scroll | auto | inherit

初始值：visible

应用于：块级元素和替换元素

继承性：无

计算值：根据指定确定

visible 元素的内容在元素框之外也可见，内容超出元素框时不会改变元素框的形状。

scroll 元素的内容会在元素框的边界处裁剪，溢出的内容将看不见，但是浏览器会使用一个滚动条（或类似的东西）来访问溢出的内容，不会改变元素本身的形状。

hidden 元素的内容会在元素框的边界处裁剪，不过不会提供滚动接口使用户访问溢出的内容，也就是说被裁剪的内容对用户来说不可用。

auto 由浏览器自动判断采用何种行为，不过都建议在必要时提供一个滚动机制。

清除浮动

（这里所说的清除浮动是指父级元素没有设定大小，子元素设定大小且处于浮动状态时，将自动调整父级元素的大小以包含其子元素）

1、overflow:hidden可以清楚浮动，overflow:scroll清除浮动时会产生滚动条，overflow:auto清除浮动效果看浏览器的解释（本人试了一下确实是这样的，不过不知道有没有别的情况）

<!--overflow:hidden清楚浮动-->
<div style="overflow: hidden;background-color: #1a1a1a">
    <div style="float: right;width: 300px;height: 300px;background-color: #2a85a0">
<span style="white-space:pre">	</span>这是一个浮动块儿
    </div>
</div>

2、还可以将父级元素设置成浮动以消除子元素的浮动效果

（为子元素增加一个兄弟元素是为了方便观察父级元素，也可以直接审查元素来查看父级元素的大小变化）

<!--为父级添加float来清楚浮动-->
<div style="float: right;background-color: #1a1a1a;">
    <div style="float: right;width: 300px;height: 300px;background-color: #2a85a0;">

    </div>
    <div style="width: 500px;height: 200px;background-color: #8a6d3b">

    </div>
</div>

3、为子元素添加设定了大小的兄弟元素，利用clear:both清楚浮动

!--添加兄弟元素用clear：both清除浮动-->
<div style="float: right;background-color: #1a1a1a;">
<div style="float: right;width: 300px;height: 300px;background-color: #2a85a0;">

</div>
<div style="width: 10px;height: 10px;clear: both;background-color: #003bb3;">

</div>
</div>

另外，如果一个绝对定位元素的内容溢出了其内容框，而且overflow设置为要求裁该内容，可以通过使用属性clip来设置裁剪区域的形状。具体如下：

clip

值:          rect(top,right,bottom,left) | auto | inherit

初始值：auto

应用于：绝对定位元素

继承性：无

计算值：对于矩形，4个计算长度表示裁剪矩形区域的4个边，否则，根据指定确定

rect(top,right,bottom,left)的4个值表示距离元素左上角的距离（在从右向左读的语言中，则是与元素右上角的距离）