overflow知多少（转）
Posted on1y_rL
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了overflow知多少（转）相关的知识，希望对你有一定的参考价值。
最近在研究OOCSS，当打开template.css阅读第一行时，震惊了，第一眼居然没看懂。。。。。。以下就是OOCSS下的template.css第一行代码：
| 1 2 |
.body
overflow
:
hidden
;
_overflow
:
visible
; _zoom:
1
;
.main
overflow
:
hidden
;
_overflow
:
visible
; _zoom:
1
;
|
后来分析这段代码，不分析不知道，一分析吓一跳，短短三个属性竟然包含了浮动、浮动清除、Haslayout、IE6兼容性、最小高度不同浏览器下实现、浏览器Hack、overflow的各种用途等等一系列的问题及知识点。废话不多说，且荣我细细道来这行代码的可怕之处！
在分析之前，先补充一下是基本知识，否则等最后分析了半天你听的一头雾水这不是本文想达到的效果。
overflow是什么，有什么用途：
overflow属性规定当内容溢出元素框时发生的事情。——W3shcool
根据CSS的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制。对于行为，我的意思是当盒子内外的内容改变的时候，它如何处理。比如，如果你没有设置一个盒子的高度，该盒子的高度将会根据它容纳内容的需要而增长。但是当你给一个盒子指定了一个高度或宽度而里面的内容超出的时候会发生什么？这就是该添加CSS的overflow属性的时候了，它允许你设定该种情况下如何处理。
overflow属性有四个值：visible (默认), hidden, scroll, 和auto。这里我们只分析 overflow:visible和hidden其他俩属性这里不多做展开，有兴趣的读者可以上网查一下另外俩个属性的知识。
知识：overflow:hidden的用途
我们平时最常用到的即overflow:hidden，一般用在固定宽高的div里面，目的是隐藏溢出使内部元素高度即使超过父元素也能够被隐藏。
overflow:hidden另一个流行的用途是用在没有宽高的div里，其目的是清除浮动。应用了overflow(auto或hidden)的元素（默认高度height:auto），将会扩展到它需要的大小以包围它里面的浮动的子元素。这是一个很奇特的特性，因为他的简洁，许多coder都喜欢利用这个特性来清除浮动。
overflow还有一个鲜为人知的特性，那就是可触发IE7的hasLayout，让我们来看看触发hasLayout不完全列表吧：
可触发hasLayout的CSS特性：
| 1 2 3 4 5 6 7 |
display
: inline-
block
height
: (除
auto
外任何值)
width
: (除
auto
外任何值)
float
: (
left
或
right
)
position
:
absolute
writing-mode: tb-rl
zoom: (除
normal
外任意值)
|
IE7可触发hasLayout的CSS 特性：
| 1 2 3 4 5 6 7 8 |
min-height
: (任意值)
min-width
: (任意值)
max-height
: (除
none
外任意值)
max-width
: (除
none
外任意值)
overflow
: (除
visible
外任意值，仅用于块级元素)
overflow-x: (除
visible
外任意值，仅用于块级元素)
overflow-y: (除
visible
外任意值，仅用于块级元素)
position
:
fixed
|
对于IE6/7特有的hasLayout特性，开发时需要特别留意，某些重要部件尽量以最小的代价来触发他的hasLayout，使得各个浏览器达到兼容。最小的代价指的是用标准的CSS属性（如with, height, IE7下还能用overflow）来触发hasLayout，避免使用不符合规范的zoom属性，为日后的再次开发打下基础。
知识：如何实现最小高度
最小高度min-height已经被大多浏览器所支持，而且他的实用性也使得他被广泛的使用，但其中唯一的遗憾那就是IE6不支持min-height！所以，为了兼容性，你必须得使IE6也能兼容min-height。所幸的是这并不难实现，IE6在设计之初就有一个问题，他虽有height属性，但是一旦内部元素高度超出父元素，其父元素也会很跟着内部元素一起增高，外部元素高度值会等于内部元素的高度值，所以说IE6下天生就有猥琐的min-height属性，带着height的面具，干着min-height的活，颇有点垂帘听政一感觉。所以遇到实现最小高度的情况我们利用IE6的Hack来实现。
| 1 2 3 |
/* IE6利用_height实现min-height */
.wrap
width
:
100px
[转] 梦里Babel知多少
|