CSS清除浮动的方法详解

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

我们将现有已知的清楚浮动元素方法罗列下:

  1. 采用一个HTML标签,以及css的clear属性,来手工清理浮动;
  2. 采用伪类:after,动态建立一个块元素,设定 clear 属性,清理之前的浮动元素;
  3. 建立 Block Formatting Contexts 来包含浮动元素,而以上两种方法就是清除浮动,跟包含概念还是不同的,方法如下几种:
    1. 如采用overflow ,非 visible 值(overflow:auto/overflow:hidden)
    2. 采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素
    3. float:left/float:right 方式将父元素同样浮动,就可以包含浮动内容
  4. 而在 IE 6/7 的标准文档模式中设置 “width/height/zoom” 等样式触发IE的layout(类似Block Formatting Contexts)来包含浮动元素。

使用 clear 样式清除

样例:

.clear-float {clear:both;}

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

使用伪元素 :after 清除

样例:

.after-clear-float :after{display:block;content:'\020';clear:both}

after 伪元素是在 CSS 2 规范内提出的,IE 6/7 并不支持。它的作用是在指定该伪元素元素内,所有子元素最后自动生成一个伪元素,并可以为这个伪元素设定样式。解释:

  • :after{display:block;clear:both}:通过伪类创建一个块元素(也可以display:table;),并设置clear为both跟上面方法原理一样。
  • content:’\020′:不使用content:’.’是为了节省代码,如用之则必须添加visibility:hidden;height:0将“.”影藏;而\020表示空白符的Undefined码。

在设定样式中,使用 clear 属性即可达到与手工添加元素指定清理的效果。

建立 Block Formatting Contexts 来包含元素的浮动

建立 Block Formatting Contexts 来包含元素的浮动是Block Formatting Contexts的3个特性之一点击了解Block Formatting Contexts的三个特性

.overflow-clear-float {overflow:hidden;}
//或者
.overflow-clear-float {overflow:auto;}
.table-clear-float {display:table}
或者
.table-clear-float {display:table-cell}
作用在父元素上的几种清除浮动的方法

使用overflow详解

overflow 样式值为 非 visilbe 时,实际上是创建了 CSS 2.1 规范定义的 Block Formatting Contexts。创建了它的元素,会重新计算其内部元素位置,从而获得确切高度。这样父容器也就包含了浮动元素高度。这个名词过于晦涩,在 CSS 3 草案中被变更为名词 Root Flow,顾名思义,是创建了一个新的根布局流,这个布局流是独立的,不影响其外部元素的。实际上,这个特性与 早期 IE 的 hasLayout 特性十分相似。

我平时用的比较多的overflow:hidden,但是当定位子元素部分在父元素外面时,父元素就会对超出其外的子元素进行裁剪,而且CSS3中的box-shadow也会被影藏掉。

注意兼容问题:
Block Formatting Contexts 概念是在 CSS 2.1 规范内被提出。因此 IE6/7 中并不被支持,这是由于之前的 IE 版本仅完全实现了 CSS 1 规范标准,以及一部分 CSS 2.0 规范。在 IE 7 中,overflow 值为非 visible 时,可以触发 hasLayout 特性。这同样使得 IE 7 同样可以使容器包含浮动元素。

使用display 为 table 或 table-cell

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

注意兼容问题:除去 Block Formatting Contexts 在 IE 6/7 中的兼容性外,display:talbe 系列样式设定也不在 IE6/7 的支持范围之内。

当然利用别的可以建立 Block Formatting Contexts 的属性也可以清除浮动,但是利用其他属性 得不偿失。

触发 hasLayout 清除

样例

haslayout-clear-float:{width:1px}
或
.haslayout-clear-float:{height:1px}
或
.haslayout-clear-float:{zoom:1}
触发 hasLayout 清除

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

注意兼容问题:
haslayout 特性仅 IE 支持,其他浏览器并无此特性。可以依靠计算布局清理浮动的 haslayout 特性仅在 IE 6/7 中存在,IE8 之后将使用 CSS 2.1 的 Block Formatting Contexts 定义来达到同样效果。

当然还有几种方法:但是不推荐

使用浮动父元素清除

当元素设置 float:left/float:right 时 ,同样也创建了 CSS 2.1 规范定义的 Block Formatting Contexts。这样父容器也就包含了浮动元素高度。同时,这个样式也会在 IE 6/7 内触发 hasLayout 特性,拥有这个特性的元素也可以计算出浮动元素的高度,使父元素包含他们。

实际问题:虽然这种方式并没有兼容问题,但实际使用中并不推荐。因为很容易推断出,页面中只要有一个浮动元素,使用该方法清理浮动将不可避免的使页面所有元素都浮动才可以达到预期效果。

二逼青年可以用table标签住浮动标签~~~

以上我们说了一些方法,但是为了兼容各个浏览器,推荐以下三种方案来解决各个浏览器的不能包含浮动元素,推荐理由:简单而且靠谱,

  1. 采用一个HTML标签,以及css的clear属性,来清理浮动
  2. 采用伪元素:after,display设置非行内,IE可以设置 zoom:1 样式触发 IE6/7 haslayout 特性,原理跟上一种一样,只是IE6/7不支持为元素
  3. 为父元素设置 overflow:hidden | overflow:auto |display:table | display:table-cell,IE则设置 zoom:1 来包含浮动元素(只要是能触发Block Formatting Contexts并且IE只能触发layout的属性都可以,不影响布局的情况下)

本文源链接:http://www.html5jscss.com/css-clear-float.html

转载请注明《CSS清除浮动的方法详解》| html5jscss

评论关闭了.