+ -
当前位置:首页 → 问答吧 → 关于float和overflow之间

关于float和overflow之间

时间:2010-06-06

来源:互联网

关于float和overflow之间

demo:
http://skyming.13.bname.us/question/float.htm

h2 overflow:hidden以后 ,h2绿色区域缩小了,这是为何?


复制内容到剪贴板
代码:
<style type="text/css">
    *{margin:0;padding:0;}
    .box{background:tan;width:200px;height:200px}
    .fl{float:left;}
    .box a{background:red;width:60px;height:60px;}
    .box h2{background:green;height:80px;}
    .oh{overflow:hidden;}
</style>
<div class="box">
    <a class="fl w60 h60" href="#">a</a>
    <h2>h2</h2>
</div>
<div class="box">
    <a class="fl w60 h60" href="#">a</a>
    <h2 class="oh">h2 (设置了overflow:hidden)</h2>
</div>

作者: linjuming   发布时间: 2010-06-06

你没有声明DTD,因此浏览器渲染模式会有差异。

作者: yoom   发布时间: 2010-06-06

任意浏览器都会这样的,我们不需要知道为什么,就像不需要知道“你设置了width:100px,宽度就会变成100像素”一样。

作者: 14px   发布时间: 2010-06-07

因为设置overflow: hidden会产生一个block formattng context,根据文档上说的,block formattng context的border-box不会和float元素进行重合,所以你看到的绿色面积就少了。
具体内容请参考:http://www.yuiblog.com/blog/2010 ... formatting-contexts 中的Block formatting contexts do not overlap floats小节。

[ 本帖最后由 lesliezmz 于 2010-6-7 13:18 编辑 ]

作者: lesliezmz   发布时间: 2010-06-07