CS001: 清理浮动的几种方法以及对应规范说明

以下内容转自 http://www.w3help.org/zh-cn/casestudies/001

《！==================》

前言

浮动 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 的元素在各浏览器中的表现会有差异

注：规范原文链接：9.4.1 Block formatting contexts

注：IE hasLayout 特性厂商说明链接：hasLayout Property

使用 display:table 清除

样例：

.table-clear-float {display:table}

或者

.table-clear-float {display:table-cell}

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

注意兼容问题：
除去 Block Formatting Contexts 在 IE 6/7 中的兼容性外，display:talbe 系列样式设定也不在 IE6/7 的支持范围之内。
此部分详细内容可参考：RM8001: 各浏览器对 'display' 特性值的支持程度不同

注：规范原文链接：9.4.1 Block formatting contexts

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

样例：

<table>

  <tr>

     <td>

       <div style=”float:left”></div>

    </td>

  </tr>

</table>

当使用 TABLE TD TH 等 TABLE 系列标签时，元素的 display 值实际上说是 display: table 系列，这同样也创建了 CSS 2.1 规范定义的 Block Formatting Contexts。这样父容器也就包含了浮动元素高度。同时在 IE 6/7 中，TABLE TD TH 等 TABLE 系列标签天然拥有 haslayout 特性，这也可以使容器自动包含浮动元素高度。

注：规范原文链接：9.4.1 Block formatting contexts

注：IE hasLayout 特性厂商说明链接：hasLayout Property

使用浮动父元素清除

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

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

注：规范原文链接：9.4.1 Block formatting contexts

触发 hasLayout 清除

样例：

haslayout-clear-float:{width:1px}

或

.haslayout-clear-float:{height:1px}

或

.haslayout-clear-float:{zoom:1}

'Layout' 是 IE 的专有概念，它决定了元素如何对其内容进行定位和尺寸计算，与其他元素的关系和相互作用，以及对应用还有使用者的影响。

'Layout' 可以被某些 CSS property（特性）不可逆的触发，而某些 HTML 元素本身就具有 layout 。

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

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

默认拥有布局的元素：

<html>, <body>

<table>, <tr>, <th>, <td>

<img>

<hr>

<input>, <button>, <select>, <textarea>, <fieldset>, <legend>

<iframe>, <embed>, <object>, <applet>

<marquee>

可触发 hasLayout 的 CSS 特性：

display: inline-block

height: (除 auto 外任何值)

width: (除 auto 外任何值)

float: (left 或 right)

position: absolute

writing-mode: tb-rl

zoom: (除 normal 外任意值)

IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout ：

min-height: (任意值)

min-width: (任意值)

max-height: (除 none 外任意值)

max-width: (除 none 外任意值)

overflow: (除 visible 外任意值，仅用于块级元素)

overflow-x: (除 visible 外任意值，仅用于块级元素)

overflow-y: (除 visible 外任意值，仅用于块级元素)

position: fixed

IE6 以前的版本（也包括 IE6 及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于 IE 5.5），通过设置任何元素的 'width' 或 'height'（非auto）都可以触发 hasLayout ；但在 IE6 和 IE7 的标准模式中的行内元素上却不行，设置 'display:inline-block' 才可以。

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

注：IE hasLayout 特性厂商说明链接：hasLayout Property

以上内容是常见清理浮动手段生效的规范（和浏览器厂商特性）原理。我们希望页面开发者们，根据他们的兼容性特征以及实际情况来组合使用，以便达到实际项目目标。

建议

对于初学者我们推荐如下方式之一来清理浮动元素，它们均相对简单可靠：

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

测试环境

操作系统版本:	Windows 7 Ultimate build 7600
浏览器版本:	IE6 IE7 IE8 IE9 Firefox 4.0.1 Chrome 12.0.742.100 Safari 5.0.5 Opera 11.11
测试页面:
本文更新时间:	2011-06-17

关键字

clear table td overflow table-cell hasLayout float 浮动 block formatting context 清理清理浮动清除浮动

CS001: 清理浮动的几种方法以及对应规范说明的更多相关文章

css div 清理浮动的2种方法
使用float属性,导致div的内容发生浮动,浮动带来负影响: 1.背景不能显示 2.边框撑不开 3.div的padding和margin不能起作用: 处理float浮动的两种方式: 1.div的子类 ...
CSS读书笔记（3）---清除浮动的几种方法
浮动元素容易造成页面错位现象.下面说说关于清除浮动的几种方法. 首先.先创建一个浮动导致错位的页面. <!DOCTYPE html> <html lang="en&quot ...
[Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
css清除浮动的几种方法整理
四种清除浮动方法如下: 1.使用空标签清除浮动.空标签可以是div标签,也可以是P 标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代码:cle ...
CSS 清除浮动的4种方法
此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.<style type=”text/css”> <!– *{margin:0;padding:0;} body{font: ...
转载 | float 清除浮动的7种方法
什么叫浮动:浮动会使当前标签脱离文档流,产生上浮的效果,同时还会影响周边元素(前后标签)及父级元素的位置和width,height属性.下面用一个小例子来看一看浮动的全过程:1.首先我们新建一个网页, ...
iOS清理缓存的几种方法
- (long long) fileSizeAtPath:(NSString*) filePath{ NSFileManager* manager = [NSFileManager defau ...
CSS 清除浮动的四种方法
在实际项目中,我们经常会用到float属性来对页面进行布局.当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间.但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字 ...
CSS 清除浮动的几种方法
导读: CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列,Float(浮动),往往是用于图像,使得文字围绕图片的效果,而它在布局时一样非常有用.不过有利也有弊,使用浮动 ...

随机推荐

[LeetCode] Palindrome Linked List 回文链表
Given a singly linked list, determine if it is a palindrome. Follow up: Could you do it in O(n) time ...
who is the middle
Description FJ is surveying his herd to find the most average cow. He wants to know how much milk th ...
zabbix入门到精通之Zabbix对linux主机的监控
我们大概了解了怎么对台主机进行监控,主要步骤设计到添加主机,并且为主机添加监控项,这里主要为item,然后在item的基础上对item进行绘图并且通过screen的方式把不同的监控图像汇总到一张scr ...
ArcGIS 坐标系统文件
坐标是GIS数据的骨骼框架,能够将我们的数据定位到相应的位置,为地图中的每一点提供准确的坐标. ArcGIS自带了多种坐标系统,在${ArcGISHome}Coordinate Systems目录下可 ...
[Effective C++ --029]为&OpenCurlyDoubleQuote;异常安全”而努力是值得的
假设有个class用来表现夹带背景图案的GUI菜单单,这个class用于多线程环境,所以它有个互斥器(mutex)作为并发控制用: class PrettyMenu{ public: ... void ...
IMG图片垂直居中的问题
之前老是碰到图片文字位置调整的问题,图片不按自己的要求变化,后来发现其实很简单. <P><img src="" style="vertical-alig ...
glide 长方形图片显示圆角问题
目前业务是RecyclerView嵌套RecyclerView,子RecyclerView里面显示图片,图片显示方式又分为多图和单图显示方式(这个是已经调试好的效果) 测试显示结果只有单张图片不显示 ...
1&period;4isAlive()方法
方法isAlive()的功能是判断当前线程是否处于活动状态活动状态是线程已经启动且尚未终止,线程处于正在运行或准备开始运行的状态,就认为线程是存活的. 测试如下 package com.cky.th ...
java编写service详细笔记 - centos7&period;2实战笔记(windows类似就不在重复了)
java编写service详细笔记 - centos7.2实战笔记(windows类似就不在重复了) 目标效果(命令行启动服务): service xxxxd start #启动服务 servic ...
Using PWM Output as a Digital-to-Analog Converter
http://www.ti.com/lit/an/spraa88a/spraa88a.pdf http://www.ti.com/litv/zip/spraa88a The high-resoluti ...