本文地址: http://www.hicss.net/some-overflow-knowledge/

最近在研究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; min-height:100px; _height:100px; background:#ccf;}
.inner{width:50px; height:150px; background:#cfc}

知识：IE6下的overflow:visible的bug

IE6会扭曲默认的overflow visible值并将水平的扩展一个盒子一匹配内容。 在IE6下（当div有具体height）应用默认的visible是没有一点效果的，因为IE6的高度会自适应（IE6没有min-height，但height就是min-height），子元素增大，父元素也会跟着一起增大，你想让子元素超出父元素，且父元素高度不变，在IE6下是行不通的。举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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">
  <div class="inner"></div>
</div>
<div class="next">标准浏览器下wrap的内部元素不会破坏文档流。而IE6下父元素会被撑开，最终影响到正常的文档流</div>
</body>
</html>

overflow:visible在IE6的表现和别的浏览器的在默认情况下的表现不同，IE6下父元素会被撑开，最终影响到正常的文档流，而其他浏览器下撑出部分不会影响正常的文档输出流，即下面的元素还是按上面元素规定的高度来显示。要达到IE6下拥有真正意义上的overflow:visible效果的话，需要这么做，包裹父元素设置为_overflow:hidden;接着继续设置它的子元素为_position:relative;即可。

回归正题，接下来分析这行代码里面各个属性真正的意义：

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的写法。

overflow知多少的更多相关文章

  1. 【转载】C# 中的委托和事件(详解)

    <div class="postbody"> <div id="cnblogs_post_body" class="blogpost ...

  2. css知多少之绝对定位小记

    一.position定位常见属性 对于属性position来说,属性值有static/relative/absolute/fixed/inherit以下只对绝对定位position:absolute详 ...

  3. 微信小程序开发日记——高仿知乎日报（上）

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  4. 微信小程序之知乎日报

    上一次的<微信小程序之小豆瓣图书>制作了一个图书的查询功能,只是简单地应用到了网络请求,其他大多数小程序应有的知识.而本次的示例是知乎日报,功能点比较多,页面也比上次复杂了许多.在我编写这 ...

  5. 看《css知多少》的一些总结

    问题 1.有些浏览器不完全支持css3,现在可以用哪个工具去检测浏览器是否支持,以及支持哪些项? modernizr:检测浏览器对HTML5和CSS3特性(至于modernizr的介绍,可以看我另外一 ...

  6. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

    原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...

  7. 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动

    本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...

  8. 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题

    受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上  ove ...

  9. 国内为什么没有好的 Stack Overflow 的模仿者？

    国内为什么没有好的 Stack Overflow 的模仿者? 个人觉得, 高端的程序员会直接上stackoverflow提问, 所以国内中文的stackoverflow必然面对低端程序员. 鉴于中国程 ...

随机推荐

  1. linux命令查看开放哪些端口

    netstat -nupl (UDP类型的端口)netstat -ntpl (TCP类型的端口) a 表示所有 n表示不查询dns t表示tcp协议 u表示udp协议 p表示查询占用的程序 l表示查询 ...

  2. delphi 杀死进程

    http://blog.sina.com.cn/s/blog_554b1f1b0100aygo.html unit Tlhelp323; interface uses  Windows,SysUtil ...

  3. UltraISO（软碟通）制作安装Ubuntu系统的U盘安装盘

    1.开UltraISO(软碟通),加载要写入U盘的iso文件,注意,要求软碟通的版本是9.3以上的.如下图: 2.点击“启动光盘.写入硬盘映像: 3.开启个写入硬盘映像的窗口,硬盘驱动器那一项看清楚是 ...

  4. Multivariate Adaptive Regression Splines (MARSplines)

    Introductory Overview Regression Problems Multivariate Adaptive Regression Splines Model Selection a ...

  5. Shell合并两个文件成一个文件的两列paste,awk

    Shell合并两个文件成一个文件的两列 发布时间:2014-07-20   编辑:www.jquerycn.cn Shell合并两个文件成一个文件的两列,提供了两种方法,普通shell脚本,awk脚本 ...

  6. Ceph源码解析：读写流程

    转载注明出处,整理也是需要功夫的,http://www.cnblogs.com/chenxianpao/p/5572859.html 一.OSD模块简介 1.1 消息封装:在OSD上发送和接收信息. ...

  7. Razor - 模板引擎 / 代码生成 - RazorEngine

    目录 Brief Authors Official Website RazorEngine 的原理 - 官方解释 安装记录 Supported Syntax (默认实现支持的语法) 测试记录 - ca ...

  8. 实现自动文本摘要（python，java）

    参考资料:http://www.ruanyifeng.com/blog/2013/03/automatic_summarization.html http://joshbohde.com/blog/d ...

  9. Java笔记12：Java对象排序

    代码: import java.util.Arrays; import java.util.Comparator; class Person { private String name; privat ...

  10. 十个书写Node.js REST API的最佳实践（下）

    收录待用,修改转载已取得腾讯云授权 5. 对你的Node.js REST API进行黑盒测试 测试你的REST API最好的方法之一就是把它们当成黑盒对待. 黑盒测试是一种测试方法,通过这种方法无需知 ...