小议overflow
overflow是CSS里面定义的一个定位属性，最常见的作用是用来设置当元素的内容溢出其区域时发生的处理方法。
另外一个常见的作用是清除浮动。
一个实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
#wrap{ width: 300px; margin: 30px auto;}
#outer{ border: 5px solid red; }
#inner_1{ float: left; width: 100px; height: 100px; background: #8fbc8f;}
#inner_2{ float: right; width: 100px; height: 100px; background: #1f7f00;}
</style>
</head>
<body>
<div id="wrap">
<div id="outer">
<div id="inner_1"></div>
<div id="inner_2"></div>
</div>
</div>
</body>
</html>
加上overflow之后，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
#wrap{ width: 300px; margin: 30px auto;}
#outer{ border: 5px solid red; overflow: hidden;}
#inner_1{ float: left; width: 100px; height: 100px; background: #8fbc8f;}
#inner_2{ float: right; width: 100px; height: 100px; background: #1f7f00;}
</style>
</head>
<body>
<div id="wrap">
<div id="outer">
<div id="inner_1"></div>
<div id="inner_2"></div>
</div>
</div>
</body>
</html>
不过这个对IE6没有用，IE6可以用设置height，设置widht或者设置zoom（注意，zoom也是CSS3的一个属性）。overflow:hidden同时也极大的限制了扩展性，因此基本用的不多，相同的清除浮动的作用可以用：after伪类或者添加div.clear来实现。
虽然overflow有不好的地方，但是也可以用在别的地方。
比如我会考虑用它来实现一个自适应宽度的布局，类似下面：
左边是一张图片，右边是图片说明：并且占满整个剩余宽度，这样就可以避免计算了图片的大小之后，又需要计算说明的宽度。
基本的HTML代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div id="wrap">
<div id="outer" class="fix">
<div id="inner_1">图片</div>
<div id="inner_2">图片说明</div>
</div>
</div>
</body>
</html>
现在让div#inner_1大小和向左浮动，div#inner_2不设置，这时div#inner_2或占满整个剩余区域，然后设置div#inner_2的overflow:hidden。
熟悉的人都知道，这时IE6下会出现著名的3像素bug，因此再用margin-right来处理这个bug。最后得到结果，就是上图的样子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
#wrap{ width: 300px; margin: 30px auto;}
#outer{ border: 5px solid red;}
.fix:after{ content: '.' ; clear:both; display: block; width: 100%; height: 0; font-size: 0; line-height: 0;}
#inner_1{ float: left; width: 100px; height: 100px; _margin-right: -3px; background: #8fbc8f;}
#inner_2{ height: 300px; background: #1f7f00; overflow: hidden;}
</style>
</head>
<body>
<div id="wrap">
<div id="outer" class="fix">
<div id="inner_1">图片</div>
<div id="inner_2">图片说明</div>
</div>
</div>
</body>
</html>
这样设置对于商品说明还行，因为我们可以确保这类应用不会有超出框外的情况。
顺便说一下，如果overflow会影响，那么这类应用也可以换个思路，改用display:inline-block和table-cell
把上面的例子换个实现，demo如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
#wrap{ width: 300px; margin: 30px auto;}
#outer{ border: 5px solid red;}
.fix:after{ content: '.' ; clear:both; display: block; width: 100%; height: 0; font-size: 0; line-height: 0;}
#inner_1{ float: left; width: 100px; height: 100px; _margin-right: -3px; background: #8fbc8f;}
#inner_2{ display: table-cell; width: 5000px; height: 300px; background: #1f7f00; }
#inner_2{ *display: inline-block; *width: auto;}
</style>
</head>
<body>
<div id="wrap">
<div id="outer" class="fix">
<div id="inner_1">图片</div>
<div id="inner_2">图片说明</div>
</div>
</div>
</body>
</html>
因为table-cell对width的不敏感，因此可以避免overflow的影响
现在忽略display:inline-block和table-cell，回到overflow的问题上来，overflow的影响总是不经意的，今天有个朋友就问我这么个问题，一个模拟的案例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
#wrap{ width: 960px; margin: 0 auto;}
#side{ float:left; width: 200px; height: 300px; background: #87ceeb; opacity: 0.5;}
#main{ margin-left: 200px; background: #9d3232;}
#inner_items{ margin-left: -20px; border: 1px solid #ff5500;}
.item{ height: 58px; margin-top: 10px; background: #2da200; overflow: hidden;}
</style>
</head>
<body>
<div id="wrap">
<div id="side">
</div>
<div id="main">
<div id="inner_items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
</body>
</html>
显示如下
按照预期，理想的显示效果应该是
这里暗中作祟的就是overflow:hidden。由于div#side的浮动以及固定宽度以及div#inner_items的margin-left的各种相遇，终于出错啦。
如果知道原因，最显然解决的办法有两种：
第一、div#inner_items不要设置margin-left，改为position: relative; left: -20px;
第二、去掉overflow，换一种清除浮动的方法。
【最后乱入一句：left与margin-left的区别是left的参考位置是最近已定位的父元素，margin-left的参考位置是最近的父元素】
转载请注明来自小西山子【http://www.cnblogs.com/xesam/】
本文地址：http://www.cnblogs.com/xesam/archive/2011/12/21/2296303.html#
