发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢。 后来又有了一种新的方式,使用 :after 伪类动态的嵌入一个用于清除浮动的元素,这种方法和上一种原理一样,不同的只是把这个额外的内容用 CSS 生成,但考虑到 IE 不支持 :after 不得不做了不少的 hack。这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,时又可以保证 html 比较干净,所以用得还是比较多的。 再后来又有人发现将父容器的 overflow 设为除 visible 之外的值就可以在标准兼容浏览器中闭合浮动元素,IE自然又是不支持的,所以这种方法和上一种方法一样都对 IE 做了不同处理(具体就是触发layout),不同的就是overflow 没有 :after 伪类那么麻烦了,缺点也有,overflow 可能会产生一些小冲突。 在使用 overflow 之前还有过一种使用 float 的方法,就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常。使用 float 虽然在 IE 和标准兼容浏览器中都能闭合浮动元素,但原理却是不同的,IE/Win 中float 触发了 layout 因而闭合了浮动,而在标准兼容浏览器中,float 其实和上一种方法中的 overflow 原理一样,产生了一个“块级格式化范围”——这是CSS 规范中提到的一种现象,它往往具有某种独立性,特性之一就是会自动闭合内部的浮动元素。 按照规范,以下类型的元素会产生一个块级格式化范围: ● 浮动元素,left 或者 right 皆可。 ● 绝对定位的元素。 ● inline-block 元素,不过这个 gecko目前不支持。 ● table-cell 类型元素,其实 table, table-head-group, table-row 什么的也都可以,还有inline-table(gecko不支持)也同样,因为他们都会间接产生一个匿名的 table-cell。 ● overflow 取值非 visible 的元素。 所以,原来在标准兼容浏览器中我们也可以有这么多的方法闭合一个浮动元素,而且只需要 CSS,无需其他。顺带说一下以上除了overflow,其余都有一个附加效果就是自动收缩父容器宽度。 而对于 IE/Win,它有一套自己的体系,就是 layout,具有 layout 的元素会自动闭合浮动元素,再来看看触发 layout 的 CSS 属性,发现和上面的块级格式化范围有很多类似之处: ● 浮动元素 ● 绝对定位元素 ● display:inline-block ● zoom ● width/height ● overflow/overflow-x/overflow-y [IE7 新增] ● max/min-width/height [IE7 新增] 网页教学网 以上来看 IE 中闭合浮动元素的方法也不少,自然也都有其局限性,要么有附带效果,要么使用的是非标准属性(无法通过验证)。 还要提一点的是 display:inline-block,这个属性对 IE 而言本身没什么用,实际效果只是给一个元素暗地添加了 layout,但是标准兼容浏览器是认得这个属性的,所以要不影响这些浏览器,需要将 display 设回默认。这里 IE 有一个 bug,如果先定义了 display:inline-block,然后再将 display 设回 block(这两个 display 要先后放在两个 CSS 声明中才有效果),那么 layout 不会消失,同时也不会影响其他浏览器,所以目前来说,这也算一个不错的触发 layout 的方法:.gainlayout{display:inline-block;}.gainlayout{display:block;} 所以要跨浏览器闭合浮动元素,可以选择的方式还是很多的,如何搭配使用这些 CSS 属性就要具体情况具体分析了,灵活应用条件注释也很有必要,要是实在不行我们回过头来还有 clear 可以用嘛。
来自: WindySky > 《CSS》
0条评论
发表
请遵守用户 评论公约
子元素浮动父容器高度不能自适应的CSS解决方法
子元素浮动父容器高度不能自适应的CSS解决方法。网页前端工作者经常会遇到子元素设置float浮动后导致父容器高度不能自适应,也就是俗称的外部容器不能被“撑大”,常见表现为背景或边框异常,这时我们...
清理浮动的几种方法以及对应规范说明
但是,由于浮动特性,容器如果没有明确设定高度,会依照普通流内元素高度设置,这样就会导致脱离普通流的浮动元素溢出容器,影响其后元素布局。这样,父容器高度未设定(值是 auto)时,由于定义的清理浮...
让DIV设置Float后高度不自动增加
让DIV设置Float后高度不自动增加 本来想把这个题目修改为“闭合浮动元素”或“清除浮动元素”,但想了一下,还是不修改为好。这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(cl...
那些年我们一起清除过的浮动
浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会...
CSS清除浮动专题
CSS清除浮动专题CSS清除浮动专题。网络上流行的说法是:在非IE浏览器(如Firefox)下,当容器的高度(height)为auto,且容器的内容中有...
IE浏览器常见CSS兼容性问题及解决办法
IE浏览器常见CSS兼容性问题及解决办法。现在市场上的IE浏览器主要有IE6、IE7、IE8、IE9、IE10、IE11等版本,IE5.5基本在市场上消失,所以后面的兼容性问题我们不做讨论。/* 减号和下划线是IE6专有的hac...
CSS Overflow属性详解
CSS Overflow属性详解。同样有两个overflow的姐妹属性overflow-y 和overflow-x,它们很少被采用。如果你不设置overflow属性,则默认的ov...
!!!!!前端问题汇总
方法1:.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}.inner{width:200px;height:200px;margin-top:-200px;}<div class="outer"></div&...
URL锚点HTML定位技术机制、应用与问题 ? 张鑫旭
URL锚点HTML定位技术机制、应用与问题 ?张鑫旭。也就是说,页面之所以能定位到锚点所在位置,都是因为URL地址中的锚链的作用,而不是点...
微信扫码,在手机上查看选中内容