css overflow 闭合浮动元素无效的解决
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:editor 阅读 275
具体比如一个div中有两个span,如果把span浮动了,你会发现div的背景色会失效!原因是div默认会象传统的table一样自动扩大,但默认不对浮动后的元素产生这样的效果.所以这时的div根本没

具体比如一个 div 中有两个 span ,如果把 span 浮动了,你会发现 div 的背景色会失效!

原因是 div 默认会象传统的 table 一样自动扩大,但默认不对浮动后的元素产生这样的效果.所以这时的 div 根本没有自动增大一块来容纳 span .

据说解决办法是在 div 的最后加一个空白文本之类的元素,还有讨论用 overflow:hidden; 的(ie通常不兼容,我试过没效果的,当然这让我们理解 overflow 作用原理是很好的).

说实话我觉得这些对 div 的讨论会蛋痛,不行的直接用 table 好了,没什么必要非得强调 css 的标准,当然 "专业" 的网页设计者是万万不会同意我的,呵呵.

 

   

最关键是后面的那个 " "

--------------------------------------------------

http://bbs.blueidea.com/viewthread.php?tid=2658256&extra=page%3D1%26amp%3Bfilter%3Drate

照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢?...

--------------------------------------------------

http://baike.baidu.com/view/1090596.htm

这里说得很清楚,特别是那张图.

 

Overflow 目录     overflow CSS属性     日本游戏品牌     计算机用语 展开 编辑本段overflow CSS属性   overflow 为CSS中设置当对象的内容超过其指定高度及宽度时如何管理内容的属性。 基本特性    初始值:    visible     适用于:    block-level and replaced elements 继承性:    无     百分比:    N/A 媒体:    visual     版本:    CSS2 兼容性:    IE4+ NS6+              基本语法   overflow-x overflow-y   overflow : visible | auto | hidden | scroll 语法取值   visible : 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值, 对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效 auto : 在必需时对象内容才会被裁切或显示滚动条 hidden : 不显示超过对象尺寸的内容 scroll : 总是显示滚动条   清除浮动   设置overflow的一个更流行的用处是,清除浮动。设置overflow并不会在该元素上清除浮动,它将清除自己(self-clear)。意思就是,应用了overflow(auto或hidden)的元素,将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing)),假设未定义高度。就像这样:   使用说明   检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。对于 table 来说,假如 table-layout 属性设置为 fixed ,则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ,那么超出 td 尺寸的内容将被剪切。如果设为 visible ,将导致额外的文本溢出到右边或左边(视 direction 属性设置而定)的单元格。自IE5开始,此属性在MAC平台上可用。自IE6开始,当你使用 !DOCTYPE 声明指定了 standards-compliant 模式,此属性可以应用于 html 对象。对应的脚本特性为 overflow 。

 

 

 

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2