《
CSS基础：了解闭合浮动元素》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023331R013.htm
● 绝对定位元素
--> [
网站建设之]CSS基本：懂得闭合浮动元素
后来又有了一种新的方式，使用 :after 伪类动态的嵌入一个用于肃清浮动的元素，这种方法和上一种原理一样，不同的只是把这个额定的内容用 CSS 天生，但斟酌到 IE 不支持 :after 不得不做了不少的 hack。这种方法兼容性普通,CSs基础：CSS的位置问题，但经由各种 hack 也可以敷衍不同浏览器了，同时又可以保障 html 比较清洁，所以用得还是比拟多的。
在使用 overflow 之前还有过一种使用 float 的方法，就是让父容器也浮动，这应用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很显明—&mdash,css基础自动定位的应用;父容器未必想浮动就浮动的了，究竟浮动是一种比较特别的行为，有时布局不容许其浮动也很畸形。使用 float 固然在 IE 和标准兼容浏览器中都能闭合浮动元素，但原理却是不同的，IE/Win 中 float 触发了 layout 因此闭合了浮动，而在标准兼容浏览器中,css基础实例只显示下划线的文本框，float 其实和上一种方法中的 overflow 原理一样，产生了一个“块级格式化范围”——这是CSS 规范中提到的一种景象，它往往具备某种独破性，特征之一就是会自动闭合内部的浮动元素。
● width/height
● table-cell 类型元素，实在 table, table-head-group, table-row 什么的也都可以，还有inline-table(gecko不支持)也同样,CSS基础 选择符详解，由于他们都会间接产生一个匿名的 table-cell。
● zoom
再后来又有人发明将父容器的 overflow 设为除 visible 之外的值就能够在标准兼容阅读器中闭合浮动元素，IE做作又是不支撑的,CSS在移动网站开发的前端技术和技巧，所以这种办法跟上一种方法一样都对 IE 做了不同处置(详细就是触发layout)，不同的就是overflow 不 :after 伪类那么麻烦了，毛病也有，overflow 可能会发生一些小抵触。
● 浮动元素
有一种做法就是在父容器内再插入一个额外的标签，并令其扫除浮动(clear)以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺陷就是需要额外的(而且通常是无语义的)标签，所以我个人不大爱好。
所以，本来在标准兼容浏览器中我们也可以有这么多的方法闭合一个浮动元素，而且只要要 CSS，无需其余。顺带说一下以上除了overflow，其余都有一个附加效果就是自动压缩父容器宽度。
.gainlayout{display:block;}
● 浮动元素，left 或者 right 皆可。
而对 IE/Win，它有一套本人的系统，就是 layout，存在 layout 的元素会自动闭合浮动元素，再来看看触发 layout 的 CSS 属性，会发现和上面的块级格式化规模有许多相似之处：
.gainlayout{display:inline-block;}
● 相对定位的元素。
Tag：DIV CSS DIV CSS
● inline-block 元素，不外这个 gecko目前不支持。
● overflow 取值非 visible 的元素。
● max/min-width/height [IE7 新增]
依照CSS标准,CSS在交互上的应用，浮动元素(floats)会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列,CSS在IE6,IE7,FIREFOX中的区别。因而当其高度超越包括容器时，个别父容器不会自动伸长以闭合浮动元素。然而有时咱们却须要这种主动闭合行动，详细如何处理呢？
CSS+DIV网页设计目前很多人在用，初学者会对闭合浮动元素很难理解，本文收拾有关这方面的材料，盼望学后可能懂得！
还要提一点的是 display:inline-block，这个属性对 IE 而言自身没什么用，实际效果只是给一个元素暗地增加了 layout，但是标准兼容浏览器是认得这个属性的,CSS圆角背景与三角形实现办法，所以要不影响这些浏览器，需要将 display 设回默认。这里 IE 有一个 bug，假如先定义了 display:inline-block，而后再将 display 设回 block(这两个 display 要先后放在两个 CSS 申明中才有效果)，那么 layout 不会消散,CSS图片层叠实现古画效果，同时也不会影响其他浏览器，所以目前来说，这也算一个不错的触发 layout 的方法：
以上来看 IE 中闭合浮动元素的方式也不少，天然也都有其局限性，要么有附带后果，要么应用的长短尺度属性(无奈通过验证)。
● overflow/overflow-x/overflow-y [IE7 新增]
按照规范，以下类型的元素会产生一个块级格局化范畴：
● display:inline-block
所以要跨浏览器闭合浮动元素，可以抉择的方法仍是良多的,css命名规则：图片切图转网页的代码规范，如何搭配使用这些 CSS 属性就要具体情形具体剖析了，机动利用前提解释也很有必要，要是切实不行我们回过火来还有 clear 可以用嘛。
(责任编辑：网站建设)
CSS基础：了解闭合浮动元素相关文章