关键词：
本文地址: 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-blockheight: (除 auto 外任何值)width: (除 auto 外任何值)float: (left 或 right)position: absolutewriting-mode: tb-rlzoom: (除 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的写法。
事件总线知多少
ImplementinganeventbuswithRabbitMQforthedevelopmentortestenvironmentAbpEventBus 查看详情
事件总线知多少
ImplementinganeventbuswithRabbitMQforthedevelopmentortestenvironmentAbpEventBus 查看详情
网页制作知多少
网页制作知多少一、通用模板：<!DOCTYPEhtml><htmllang=”en”> <head> <meta charset=”UTF-8”/> &nb 查看详情
unitofwork知多少(代码片段)
原文链接：https://www.cnblogs.com/sheng-jie/p/7416302.html1.引言Maintainsalistofobjectsaffectedbyabusinesstransactionandcoordinatesthewritingoutofchangesandtheresolutionofconcurrencyproblems.UnitofWork 查看详情
-webkit-overflow-scrolling:touch 有多少支持
】-webkit-overflow-scrolling:touch有多少支持【英文标题】：Howmuchsupportistherefor-webkit-overflow-scrolling:touch【发布时间】：2011-12-0718:37:39【问题描述】：支持多少浏览器-webkit-overflow-scrolling:touchiOS5可以，其余的呢，还有android等。【问题讨... 查看详情
产品开发知多少一
为什么要进行产品开发？1.市场需求使然，获取商业价值；2.公司战略需要，为公司的战略目标打基础；3.技术发展需求，做公司核心技术积累；开发产品依据？1.企业目标2.战略部署3.技术积累4.市场需求组织中谁来进行产品开发... 查看详情
ffmpeg知多少~~~
一、ffmpeg安装：https://jingyan.baidu.com/article/f7ff0bfcd64cea2e26bb1334.html 二、ffmpeg视频处理（包括各种视频流处理~）：三、ffmpeg推流步骤：1）通过ffmpeg截取指定长度的视频流：ffmpeg-t10-irtsp://xxx:xxxxx1234@172.20.xx.xxx:55410s_out 查看详情
__attribute__你知多少(代码片段)
__ATTRIBUTE__你知多少？GNUC 的一大特色就是__attribute__ 机制。__attribute__ 可以设置函数属性（FunctionAttribute ）、变量属性（VariableAttribute ）和类型属性（TypeAttribute ）。__attribute__ 书写特征是：__attribu 查看详情
typeof知多少
昨天同事给我看了一道代码题，是关于typeof的，感觉挺有意思的，在这里分享给大家，顺便自己再对typeof总结总结。如有不对，请给予指出，共同进步。代码是这样的：<!DOCTYPEhtml><head><title>typeof</title><metahttp-... 查看详情
射频&天线设计-db知多少
《射频&天线设计-dB知多少》在调试射频输出功率时经常听到“相差多少dB”，刚入门的话听得一脸懵逼，当然这种通俗单位别人也懒得跟你解释。分贝（dB）是一个对数单位（logarithmicunit），最初用... 查看详情
射频&天线设计-db知多少
《射频&天线设计-dB知多少》在调试射频输出功率时经常听到“相差多少dB”，刚入门的话听得一脸懵逼，当然这种通俗单位别人也懒得跟你解释。分贝（dB）是一个对数单位（logarithmicunit），最初用... 查看详情
玩转springboot原理篇（核心注解知多少）(代码片段)
type=FilterType.CUSTOM,classes=TypeExcludeFilter.classtype=FilterType.CUSTOM,classes=AutoConfigurationExcludeFilter.classSpringBootApplicationSpringBootConfigurationComponentScanEnableAutoConfiguratio 查看详情
电磁屏蔽知多少？
原文来自公众号：工程师看海不管什么电子产品，EMC始终是其需要面对的问题，EMC全拼是ElectromagneticCompatibility即电磁兼容性，EMC分为EMS（electromagneticsusceptibility）电磁抗扰度和EMI（Electromagneticinterfere 查看详情
第一讲测试知多少
1.1计算机基础1.1.1计算机相关定义◆软件和硬件：软件：当电脑启动时的应用程序，应用软件（腾讯，qq，有道云，有道翻译）、系统、网页、驱动（看得见、摸不着）硬件：计算机的硬件是计算机的各种设备的总称，分为五个... 查看详情
css知多少（11）——position
1.引言 本文将用一篇文章介绍position（定位），在学习position之前，我们应该去思考一个问题：什么情况下我们需要定位？如果没有定位将无法满足我们怎样的需求？我们要知道，被人类创造出来的每一个知识，都有它的用途... 查看详情
css知多少——选择器的优先级（转）
1.引言 上一节《css知多少（5）——选择器》最后提到，选择器类型过多将导致一些问题，是什么问题呢？咱们直接举例子说明。 上图中，css中的两个选择器都是针对<span>的，而且两个设置的颜色不一样，这里的... 查看详情
开发趋势：快速开发平台知多少？
开发趋势：快速开发平台知多少？ 一、什么是快速开发平台 简而言之，就是可以使得开发更为快速的平台。当开发平台产生之后，虽然减少了编程人员大量的编程时间，但是很多开发平台的效果并不是很理想，比... 查看详情
css知多少（10）——display（转）
1.引言 网页的所有元素，除了“块”就是“流”，而且“流”都是包含在“块”里面的（最外层的body就是一个“块”）。在本系列一开始讲《浏览器默认样式》的时候，大家也都看到了浏览器默认样式中规定了html元素哪些... 查看详情