闭合CSS浮动元素技巧剖析

按照CSS规范，CSS浮动元素(floats)会被移出文档流，当其高度超出包含容器时，一般父容器不会自动伸长以闭合CSS浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？请看本文详细介绍。

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站建设、成都网站设计、原平网络推广、微信小程序开发、原平网络营销、原平企业策划、原平品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供原平建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

闭合CSS浮动元素(floats)技巧

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

　　◆有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的(而且通常是无语义的)标签，所以我个人不大喜欢。

　　◆后来又有了一种新的方式，使用:after伪类动态的嵌入一个用于清除浮动的元素，这种方法和上一种原理一样，不同的只是把这个额外的内容用CSS生成，但考虑到IE不支持:after不得不做了不少的hack。这种方法兼容性一般，但经过各种hack也可以应付不同浏览器了，同时又可以保证html比较干净，所以用得还是比较多的。

　　◆再后来又有人发现将父容器的overflow设为除visible之外的值就可以在标准兼容浏览器中闭合CSS浮动元素，IE自然又是不支持的，所以这种方法和上一种方法一样都对IE做了不同处理(具体就是触发layout)，不同的就是overflow没有:after伪类那么麻烦了，缺点也有，overflow可能会产生一些小冲突。

　　在使用overflow之前还有过一种使用float的方法，就是让父容器也浮动，这利用到了CSS浮动元素的一个特性——CSS浮动元素会闭合CSS浮动元素。这种方式在IE/Win和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。使用float虽然在IE和标准兼容浏览器中都能闭合CSS浮动元素，但原理却是不同的，IE/Win中float触发了layout因而闭合了浮动，而在标准兼容浏览器中，float其实和上一种方法中的overflow原理一样，产生了一个“块级格式化范围”——这是CSS规范中提到的一种现象，它往往具有某种独立性，特性之一就是会自动闭合内部的CSS浮动元素。

按照规范，以下类型的元素会产生一个块级格式化范围：

　　◆CSS浮动元素，left或者right皆可。

　　◆绝对定位的元素。

　　◆inline-block元素，不过这个gecko目前不支持。

　　◆table-cell类型元素，其实table,table-head-group,table-row什么的也都可以，还有inline-table(gecko不支持)也同样，因为他们都会间接产生一个匿名的table-cell。

　　◆overflow取值非visible的元素。

　　所以，原来在标准兼容浏览器中我们也可以有这么多的方法闭合一个CSS浮动元素，而且只需要CSS，无需其他。顺带说一下以上除了overflow，其余都有一个附加效果就是自动收缩父容器宽度。

而对于IE/Win，它有一套自己的体系，就是layout，具有layout的元素会自动闭合CSS浮动元素，再来看看触发layout的CSS属性，会发现和上面的块级格式化范围有很多类似之处：

　　◆CSS浮动元素

　　◆绝对定位元素

　　◆display:inline-block

　　◆zoom

　　◆width/height

　　◆overflow/overflow-x/overflow-y[IE7新增]

　　◆max/min-width/height[IE7新增]

　　以上来看IE中闭合CSS浮动元素的方法也不少，自然也都有其局限性，要么有附带效果，要么使用的是非标准属性(无法通过验证)。

　　还要提一点的是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浮动元素，可以选择的方式还是很多的，如何搭配使用这些CSS属性就要具体情况具体分析了，灵活应用条件注释也很有必要，要是实在不行我们回过头来还有clear可以用嘛。

网站题目：闭合CSS浮动元素技巧剖析
当前链接：http://www.shufengxianlan.com/qtweb/news47/94497.html

成都网站建设公司_创新互联，为您提供建站公司、微信公众号、外贸网站建设、App开发、面包屑导航、品牌网站制作

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联