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个值表示距离元素左上角的距离(在从右向左读的语言中,则是与元素右上角的距离)