清理Float浮动的几种方法.docxVIP

CS001: 清理浮动的几种方法以及对应规范说明前言?使用 clear 样式清除?使用伪元素 :after 清除?使用 overflow 清除?使用 display:table 清除?使用表格类元素作为浮动元素容器?使用浮动父元素清除?触发 hasLayout 清除?建议作者：王天奇前言浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间，这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是，由于浮动特性，容器如果没有明确设定高度，会依照普通流内元素高度设置，这样就会导致脱离普通流的浮动元素溢出容器，影响其后元素布局。我们将现有已知的清楚浮动元素方法罗列下：采用一个HTML标签，以及css的clear属性，来手工清理浮动；采用伪类:after，动态建立一个块元素，设定 clear 属性，清理之前的浮动元素；采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素；采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素；使用 TABLE 以及 TD 标签作为浮动元素容器；采用 float:left/float:right 方式将父元素同样浮动，就可以包含浮动内容；在 IE 6/7 的标准文档模式中设置“width/height/zoom”等样式来自动清理浮动。对这些方式我们一一来对照 CSS 标准（或者浏览器特性）来解释下。使用 clear 样式清除样例：.clear-float {clear:both;} clear 属性是 CSS 1 就提供的用来清除浮动的样式，设置了 clear 属性的元素，其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染，忽略其 margin-top 设置。这样，父容器高度未设定(值是 auto)时，由于定义的清理浮动样式元素所在位置处于浮动元素之下，容器计算后的实际高度就包含了浮动元素。注：规范原文链接：9.5.2 Controlling flow next to floats: the clear property使用伪元素 :after 清除样例：.after-clear-float :after{content:””; display:block; clear:both;}:after 伪元素是在 CSS 2 规范内提出的，IE 6/7 并不支持。它的作用是在指定该伪元素元素内，所有子元素最后自动生成一个伪元素，并可以为这个伪元素设定样式。在设定样式中，使用 clear 属性即可达到与手工添加元素指定清理的效果。注意兼容问题： :after 伪元素在 IE6/7 中并不被支持，这是由于之前的 IE 版本仅完全实现了 CSS 1 规范标准，以及一部分 CSS 2 规范，恰巧 :after 伪元素不在实现之例。此部分详细内容可参考：RS8010: IE6 IE7 IE8(Q) 不支持 :before 和 :after 伪元素注：规范原文链接：5.12.3 The :before and :after pseudo-elements使用 overflow 清除样例：.overflow-clear-float {overflow:hidden;}或者.overflow-clear-float {overflow:auto;}overflow 样式值为非 visilbe 时，实际上是创建了 CSS 2.1 规范定义的 Block Formatting Contexts。创建了它的元素，会重新计算其内部元素位置，从而获得确切高度。这样父容器也就包含了浮动元素高度。这个名词过于晦涩，在 CSS 3 草案中被变更为名词 Root Flow，顾名思义，是创建了一个新的根布局流，这个布局流是独立的，不影响其外部元素的。实际上，这个特性与早期 IE 的 hasLayout 特性十分相似。注意兼容问题： Block Formatting Contexts 概念是在 CSS 2.1 规范内被提出。因此 IE6/7 中并不被支持，这是由于之前的 IE 版本仅完全实现了 CSS 1 规范标准，以及一部分 CSS 2.0 规范。在 IE 7 中，overflow 值为非 visible 时，可以触发 hasLayout 特性。这同样使得 IE 7 同样可以使容器包含浮动元素。此部分详细内容可参考：RM8002: 不能同时在 IE6 IE7 IE8(Q) 中触发 hasLayout 并在其他浏览器中创建 Block Formatting Context 的元素在