清除浮动细节介绍

前言

浮动float的渲染位置在行框与包含块之间，这样可以使得行框内文字与浮动元素不重叠，并且环绕它显示。在布局过程中经常使用它实现左右并排布局的效果。但是，由于浮动特性，容器如果没有明确设定高度，会依照普通流内元素高度设置，这样就会导致脱离普通流的浮动元素溢出容器，影响后面的元素布局。

已知的清除浮动元素方法：

  1. 采用一个HTML标签，以及css的clear属性，手动清除浮动；
  2. 采用伪类:after动态建立一个块元素，设定clear属性，清除之前的浮动元素；
  3. 采用css overflow非visible值（overflow:auto/overflow:hidden）设定使父容器包含浮动元素；
  4. 采用display:table/display:table-cell等table系列属性将父元素变成table形式自动包含浮动元素；
  5. 使用table以及td标签作为浮动元素容器；
  6. 采用float:left/float:right方式将父元素同样浮动，就可以包含浮动内容；
  7. 在IE 6/7的标准文档模式中设置width/height/zoom等样式来自动清除浮动；

使用clear样式清除

1
.clear-float {clear:both;}

clear属性是CSS 1就提供的用来清除浮动的样式，设置了clear属性的元素，其上边框位置会紧贴浮动元素的margin-bottom边界位置渲染，忽略其margin-top设置。这样父容器高度为设定（默认值是auto）时，由于定义的清除浮动样式元素所在位置处于浮动元素下，容器计算后的实际高度就包含了浮动元素。

使用伪元素:after清除

1
.after-clear-float :after{content:""; display:block; clear:both;}

:after伪元素是在CSS 2规范内提出的，IE 6/7并不支持。它的作用是在指定该伪元素内部，所有子元素最后自动生成一个伪元素，并且可以为这个伪元素设定样式。在设定样式中，使用clear属性即可达到与手动添加元素指定清理的效果。

注意兼容问题：

使用overflow清除

1
2
3
.overflow-clear-float {overflow:hidden;}
或者
.overflow-clear-float {overflow:auto;}

overflow样式值为非visible时，实际上是创建了CSS 2.1规范定义的BFC。创建了它的元素，会重新计算其内部元素位置，从未获得确切高度。这样父容器也就包含了浮动元素高度。

使用display:table清除

1
2
3
.table-clear-float {display:table}
或者
.table-clear-float {display:table-cell}

当元素display值被设定为table或table-cell时，同样创建了CSS 2.1规范定义的BFC。这样父容器也就包含了浮动元素高度。

使用表格类元素作为浮动元素容器

1
2
3
4
5
6
7
<table>
  <tr>
     <td>
       <div style=”float:left”></div>
    </td>
  </tr>
</table>

当使用table td th等table系列标签时，元素的display值实际上是display:table系列，这同样也创建了BFC。这样父容器也就包含了浮动元素高度。同时在IE 6/7中，table td th等table系列标签天然拥有haslayout特性，这也可以使容器自动包含浮动元素高度。

使用浮动父元素清除

当元素设置float:left/float:right时，创建BFC。父容器包含浮动元素高度。

触发haslayout清除

1
2
3
4
5
haslayout-clear-float:{width:1px}
或
.haslayout-clear-float:{height:1px}
或
.haslayout-clear-float:{zoom:1}

layout是IE的专有概念，它决定了元素如何对其内容进行定位和尺寸计算。可以被某些css property特性不可逆的触发，而某些HTML元素本身就具有layout。

layout在IE中可以通过hasLayout属性来判断一个元素是否具有layout，如object.currentStyle.hasLayout。

layout是IE浏览器渲染引擎的一个内部组成部分，在IE浏览器中，一个元素要么自己对自身的内容进行组织和计算大小，要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了hasLayout属性，属性值可以为true或false。当一个元素的hasLayout属性值为true时，我们说这个元素有一个布局layout，或拥有布局。

默认拥有布局的元素：

1
2
3
4
5
6
7
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>

可以触发hasLayout的CSS特性：

1
2
3
4
5
6
7
display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)

IE7还有一些额外的属性可以触发hasLayout`：

1
2
3
4
5
6
7
8
min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，仅用于块级元素)
overflow-x: (除 visible 外任意值，仅用于块级元素)
overflow-y: (除 visible 外任意值，仅用于块级元素)
position: fixed

建议

对于初级开发者，推荐使用以下清除浮动元素的方式：

  • 采用一个HTML标签，以及css的clear属性，来手动清除浮动；
  • 为元素设置overflow:hidden或overflow:auto值，配合可以设置zoom:1样式触发IE 6 hasLayout特性，来达到兼容所有浏览器清除浮动的目的；
  • 采用伪元素:after配合可以设置zoom:1样式触发IE6/7 hasLayout特性。