《
CSS教程：overflow属性知多少》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302333a2013.htm
overflow还有一个鲜为人知的特征，那就是可触发IE7的hasLayout，让我们来看看触发hasLayout不完整列表吧：
知识：如何实现最小高度
1.overflow:hidden写在应用在包裹元素上的.body和.main，其目的是利用其清除浮动的特性而非隐藏内部元素特性。
2.为了兼容性要触发IE6/7的hasLayout。这里应用overflow:hidden的特性以最小的代价在IE7下清除浮动效果同时并触发hasLayout，一举二得。IE6用的是专有Hack和zoom属性（_zoom:1）来触发hasLayout。
3.既然我们应用overflow:hidden是为了扫除浮动，所以我们相对不能让元素有高度属性。而实际工作中，往往请求必要的根本高度来达到公道的布局要求，那么这个时候须要使用最小高度min-height，依据前面的知识我们得悉IE6实现最小高度的方式是用height实现，而我们的overflow:hidden为了消除浮动大局观是不容许呈现固定高度的，使用了hidden再增加了height，那么overflow的特性则产生改变，变成了暗藏溢出的功效。这里次应用IE6下的overflow:visible的bug，让IE6下的父元素主动撑开，达到了所谓的清除浮动的目标，能够说的上是歪打正着，于是乎，发生了_overflow:visible的写法。
最小高度min-height已经被大多浏览器所支撑，而且他的适用性也使得他被普遍的使用，但其中独一的遗憾那就是IE6不支持min-height！所以，为了兼容性，你必需得使IE6也能兼容min-height。所幸的是这并不难实现，IE6在设计之初就有一个问题，他虽有height属性，但是一旦内部元素高度超出父元素，其父元素也会很随着内部元素一起增高，外部元素高度值会即是内部元素的高度值，所以说IE6下生成就有鄙陋的min-height属性，带着height的面具，干着min-height的活，颇有点垂帘听政一感到。所以碰到实现最小高度的情况我们利用IE6的Hack来实现。
[ 提醒：你可先修正局部代码，再按Ctrl+A 全体抉择 ]
IE6会扭曲默认的overflow visible值并将程度的扩展一个盒子一匹配内容。 在IE6下（当div有详细height）运用默认的visible是没有一点效果的，因为IE6的高度会自适应（IE6没有min-height,CSS教程：CSS3圆角属性，但height就是min-height），子元素增大，父元素也会跟着一起增大，你想让子元素超出父元素,CSS教程之文章内容样式表现的技巧，且父元素高度不变，在IE6下是行不通的。举个例子：
可触发hasLayout的CSS特性：
--> [
网站建设之]CSS教程：overflow属性知多少
overflow属性划定当内容溢出元素框时发生的事件。——W3shcool
短短三个属性居然包括了浮动、浮动肃清、Haslayout、IE6兼容性、最小高度不同阅读器下实现、浏览器Hack、overflow的各种用处等等一系列的问题及常识点。咱们在分析之前，先弥补一下是基础知识，否则等最后剖析了半天你听的一头雾水这不是本文想到达的后果。
min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，仅用于块级元素)
overflow-x: (除 visible 外任意值，仅用于块级元素)
overflow-y: (除 visible 外任意值，仅用于块级元素)
position: fixed
Tag： overflow属性 CSS教程 overflow属性 CSS教程
IE7可触发hasLayout的CSS 特性：
.body{overflow:hidden; _overflow:visible; _zoom:1;}
.main{overflow:hidden; _overflow:visible; _zoom:1;}
知识：overflow:hidden的用途
知识：IE6下的overflow:visible的bug
overflow:visible在IE6的表示和别的浏览器的在默认情况下的表现不同，IE6下父元素会被撑开，最终影响到正常的文档流，而其他浏览器下撑出部门不会影响正常的文档输出流，即下面的元素仍是按上面元素规定的高度来显示。要达到IE6下领有真正意思上的overflow:visible效果的话，需要这么做，包裹父元素设置为_overflow:hidden;接着持续设置它的子元素为_position:relative;即可。
回归正题，接下来分析这行代码里面各个属性真正的意义：
两行CSS代码你是否能清楚是什么意思？我们一起来分析一下。
,CSS教程之内容设置的一些语法;/* IE6利用_height实现min-height */
.wrap{width:100px; min-height:100px; _height:100px; background:#ccf,css教程之font-size属性;}
.inner{width:50px; height:150px; background:#cfc}
根据CSS的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、地位和行为都可以用CSS来把持。对于行动，我的意思是当盒子内外的内容转变的时候，它如何处理。比方，假如你没有设置一个盒子的高度，该盒子的高度将会根据它包容内容的需要而增加。然而当你给一个盒子指定了一个高度或宽度而里面的内容超越的时候会发生什么？这就是该增添CSS的overflow属性的时候了，它许可你设定该种情形下如何处置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>,CSS教程 视觉语义不等于基于表现的类; <meta http-equiv="Content-Type" content=",CSS教程 网页字体及字体大小的设计;text/html; charset=gb2312" /> <title>IE6下的overflow:visible的bug</title> <style> .wrap{width:100px; height:100px; background:#ccf;} .inner{width:50px; height:150px; background:#cfc;} .next{width:100px;} </style> </head> <body> <div class="wrap",CSS教程 编写CSS代码时样式命名的规则;> <div class="inner"></div> </div> <div class=",CSS教程 浮动元素对浏览器的支持;next">尺度浏览器下wrap的内部元素不会损坏文档流。而IE6下父元素会被撑开，终极影响到畸形的文档流</div> </body> </html>
对IE6/7特有的hasLayout特性，开发时需要特殊留心，某些主要部件尽量以最小的代价来触发他的hasLayout，使得各个浏览器达到兼容。最小的代价指的是用标准的CSS属性（如with, height, IE7下还能用overflow）来触发hasLayout，防止使用不合乎标准的zoom属性，为日后的再次开发打下基本。
overflow:hidden另一个风行的用途是用在不宽高的div里，其目的是清除浮动。利用了overflow(auto或hidden)的元素（默认高度height:auto）,CSS教程 所有浏览器中都能正常显示的字体，将会扩大到它需要的大小以包抄它里面的浮动的子元素。这是一个很独特的特性，由于他的简练，很多coder都爱好利用这个特性来清除浮动。
display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
我们平时最常用到的即overflow:hidden，个别用在固定宽高的div里面，目的是隐藏溢出使内部元素高度即便超过父元素也可能被隐蔽。
overflow属性有四个值：visible (默认),CSS教程 关于网页图片的属性, hidden, scroll, 和auto。这里我们只分析 overflow:visible跟hidden其余俩属性这里未几做开展，有兴致的读者可以上网查一下另外俩个属性的知识。
overflow是什么，有什么用途：
(责任编辑：网站建设)
CSS教程：overflow属性知多少相关文章