清除浮动细节介绍
![](/img/icons/default_cover.jpg)
清除浮动细节介绍
吴华锦前言
浮动float
的渲染位置在行框与包含块之间,这样可以使得行框内文字与浮动元素不重叠,并且环绕它显示。在布局过程中经常使用它实现左右并排布局的效果。但是,由于浮动特性,容器如果没有明确设定高度,会依照普通流内元素高度设置,这样就会导致脱离普通流的浮动元素溢出容器,影响后面的元素布局。
已知的清除浮动元素方法:
- 采用一个
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
等样式来自动清除浮动;
使用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 | .overflow-clear-float {overflow:hidden;} |
overflow
样式值为非visible
时,实际上是创建了CSS 2.1规范定义的BFC。创建了它的元素,会重新计算其内部元素位置,从未获得确切高度。这样父容器也就包含了浮动元素高度。
使用display:table清除
1 | .table-clear-float {display:table} |
当元素display
值被设定为table
或table-cell
时,同样创建了CSS 2.1规范定义的BFC。这样父容器也就包含了浮动元素高度。
使用表格类元素作为浮动元素容器
1 | <table> |
当使用table td th
等table
系列标签时,元素的display
值实际上是display:table
系列,这同样也创建了BFC。这样父容器也就包含了浮动元素高度。同时在IE 6/7中,table td th
等table
系列标签天然拥有haslayout
特性,这也可以使容器自动包含浮动元素高度。
使用浮动父元素清除
当元素设置float:left/float:right
时,创建BFC。父容器包含浮动元素高度。
触发haslayout清除
1 | haslayout-clear-float:{width:1px} |
layout
是IE的专有概念,它决定了元素如何对其内容进行定位和尺寸计算。可以被某些css property
特性不可逆的触发,而某些HTML元素本身就具有layout
。
layout
在IE中可以通过hasLayout
属性来判断一个元素是否具有layout
,如object.currentStyle.hasLayout
。
layout
是IE浏览器渲染引擎的一个内部组成部分,在IE浏览器中,一个元素要么自己对自身的内容进行组织和计算大小,要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾,渲染引擎采用了hasLayout
属性,属性值可以为true
或false
。当一个元素的hasLayout
属性值为true
时,我们说这个元素有一个布局layout
,或拥有布局。
默认拥有布局的元素:
1 | <html>, <body> |
可以触发hasLayout
的CSS
特性:
1 | display: inline-block |
IE7还有一些额外的属性可以触发
hasLayout`:
1 | min-height: (任意值) |
建议
对于初级开发者,推荐使用以下清除浮动元素的方式:
- 采用一个
HTML
标签,以及css
的clear
属性,来手动清除浮动; - 为元素设置
overflow:hidden
或overflow:auto
值,配合可以设置zoom:1
样式触发IE 6 hasLayout
特性,来达到兼容所有浏览器清除浮动的目的; - 采用伪元素
:after
配合可以设置zoom:1
样式触发IE6/7 hasLayout
特性。