`

清除浮动

    博客分类:
  • CSS
 
阅读更多

原文:http://www.iyunlu.com/view/css-xhtml/55.html

浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器)。也许很多人都有这样的疑问,浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。

一、清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)?

 

很多人都已经习惯称之为清除浮动,以前我也一直这么叫着,但是确切地来说是不准确的。我们应该用严谨的态度来对待代码,也能更好地帮助我们理解开头的三个问题。

 

1)清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:left | right | both | none;

 

2)闭合浮动:更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。

 

两者的区别 请看优雅的 Demo

 

通过以上实例发现,其实我们想要达到的效果更确切地说是闭合浮动,而不是单纯的清除浮动,在footer上设置clear:both清除浮动并不能解决wrap高度塌陷的问题。  

 

结论:用闭合浮动比清除浮动更加严谨,所以后文中统一称之为:闭合浮动。

 

二、为何要闭合浮动?

 

要解答这个问题,我们得先说说CSS中的定位机制:普通流,浮动,绝对定位 (其中"position:fixed" 是 "position:absolute" 的一个子类)。

 

1)普通流:很多人或者文章称之为文档流或者普通文档流,其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ,但标准里只有另一个词,叫做 普通流 (normal flow),或者称之为常规流。但似乎大家更习惯文档流的称呼,因为很多中文翻译的书就是这么来的。比如《CSS Mastery》,英文原书中至始至终都只有普通流 normal flow(普通流) 这一词,从来没出现过document flow (文档流)

 

2)浮动:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到 块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会 自动伸高来闭合浮动元素(“高度塌陷”现象)。顾名思义,就是漂浮于普通流之上,像浮云一样,但是只能左右浮动。

 

正是因为浮动的这种特性,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为0(高度塌陷)。在实际布局中,往往这并不是我们所希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度。

 

绝对定位就不多说了,不在本文讨论范围之内,下回分解。

 

三、闭合浮动的原理——了解 hasLayout 和 Block formatting contexts

 

先看一下清理浮动的各种方法:

 

1)添加额外标签

 

这是在学校老师就告诉我们的 一种方法,通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>,其他标签br等亦可。

 

 <div class="wrap" id="float1">

 

<h2>1)添加额外标签</h2>

 

<div class="main left">.main{float:left;}</div>

 

<div class="side left">.side{float:right;}</div>

 

<div style="clear:both;"></div>

 

</div>

 

<div class="footer">.footer</div>

 

 优雅的 Demo

 

优点:通俗易懂,容易掌握

 

缺点:可以想象通过此方法,会添加多少无意义的空标签,有违结构与表现的分离,在后期维护中将是噩梦,这是坚决不能忍受的,所以你看了这篇文章之后还是建议不要用了吧。

 

 2)使用 br标签和其自身的 html属性

 

这个方法有些小众,br 有 clear=“all | left | right | none” 属性

 

 <div class="wrap" id="float2">

 

<h2>2)使用 br标签和其自身的 html属性</h2>

 

<div class="main left">.main{float:left;}</div>

 

<div class="side left">.side{float:right;}</div>

 

<br clear="all" />

 

</div>

 

<div class="footer">.footer</div>

 

 优雅的 Demo

 

 优点:比空标签方式语义稍强,代码量较少

 

缺点:同样有违结构与表现的分离,不推荐使用

 

 3)父元素设置 overflow:hidden

 

通过设置父元素overflow值设置为hidden;在IE6中还需要触发 hasLayout ,例如 zoom:1;

 

 <div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">

 

<h2>3)父元素设置 overflow </h2>

 

<div class="main left">.main{float:left;}</div>

 

<div class="side left">.side{float:right;}</div>

 

</div>

 

<div class="footer">.footer</div>

 

 优雅的 Demo

 

优点:不存在结构和语义化问题,代码量极少

 

缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素;04年POPO就发现overflow:hidden会导致中键失效,这是我作为一个多标签浏览控所不能接受的。所以还是不要使用了

 

4)父元素设置 overflow:auto 属性

 

同样IE6需要触发hasLayout,演示和3差不多

 

优点:不存在结构和语义化问题,代码量极少

 

缺点:多个嵌套后,firefox某些情况会造成内容全选;IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等,firefox早期版本会无故产生focus等, 请看 嗷嗷的 Demo ,不要使用

 

5)父元素也设置浮动

 

优点:不存在结构和语义化问题,代码量极少

 

缺点:使得与父元素相邻的元素的布局会受到影响,不可能一直浮动到body,不推荐使用

 

6)父元素设置display:table

 

 优雅的 Demo

 

 优点:结构语义化完全正确,代码量极少

 

缺点:盒模型属性已经改变,由此造成的一系列问题,得不偿失,不推荐使用

 

7)使用:after 伪元素

 

需要注意的是 :after是伪元素(Pseudo-Element),不是伪类(某些CSS手册里面称之为“伪对象”),很多闭合浮动大全之类的文章都称之为伪类,不过csser要严谨一点,这是一种态度。

 

由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。

 

 该方法源自于: How To Clear Floats Without Structural Markup

 

原文全部代码如下:

 

<style type="text/css">  .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {display: inline-block;}  /* for IE/Mac */   </style> <!--[if IE]> <style type="text/css"> .clearfix {zoom: 1;/* triggers hasLayout */  display: block;/* resets display for IE/Win */} </style>  <![endif]-->  鉴于 IE/Mac的市场占有率极低,我们直接忽略掉,最后精简的代码如下:

 

 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

 

.clearfix { *zoom:1; }

 

 优雅的 Demo

 

优点:结构和语义化完全正确,代码量居中

 

缺点:复用方式不当会造成代码量增加

 

 小结

 

通过对比,我们不难发现,其实以上列举的方法,无非有两类:

 

其一,通过在浮动元素的末尾添加一个空元素,设置 clear:both属性,after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素;

 

其二,通过设置父元素 overflow 或者display:table 属性来闭合浮动,我们来探讨一下这里面的原理。

 

在CSS2.1里面有一个很重要的概念,但是国内的技术博客介绍到的比较少,那就是 Block formatting contexts (块级格式化上下文),以下简称 BFC。

 

CSS3里面对这个规范做了改动,称之为:flow root,并且对触发条件进行了进一步说明。

 

那么如何触发BFC呢?

 

  • float 除了none以外的值
     
  • overflow 除了visible 以外的值(hidden,auto,scroll )
     
  • display (table-cell,table-caption,inline-block)
     
  • position(absolute,fixed)
     
  • fieldset元素

 

需要注意的是,display:table 本身并不会创建BFC,但是它会产生匿名框(anonymous boxes),而匿名框中的display:table-cell可以创建新的BFC,换句话说,触发块级格式化上下文的是匿名框,而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。

 

 fieldset 元素在www.w3.org里目前没有任何有关这个触发行为的信息,直到HTML5标准里才出现。有些浏览器bugs(Webkit,Mozilla)提到过这个触发行为,但是没有任何官方声明。实际上,即使fieldset在大多数的浏览器上都能创建新的块级格式化上下文,开发者也不应该把这当做是理所当然的。CSS 2.1没有定义哪种属性适用于表单控件,也没有定义如何使用CSS来给它们添加样式。用户代理可能会给这些属性应用CSS属性,建议开发者们把这种支持当做实验性质的,更高版本的CSS可能会进一步规范这个。

 

 

 

BFC的特性:

 

1)块级格式化上下文会阻止外边距叠加

 

当两个相邻的块框在同一个块级格式化上下文中时,它们之间垂直方向的外边距会发生叠加。换句话说,如果这两个相邻的块框不属于同一个块级格式化上下文,那么它们的外边距就不会叠加。

 

2)块级格式化上下文不会重叠浮动元素

 

根据规定,一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因,当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用(Webkit和IE6在这点上有一个问题——可以看这个测试用例)。 

 

3)块级格式化上下文通常可以包含浮动

 

详见: W3C CSS2.1 - 10.6.7 'Auto' heights for block formatting context roots 
  

 

通俗地来说:创建了 BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,反之亦然,同时BFC任然属于文档中的普通流。

 

至此,您或许明白了为什么 overflow:hidden或者auto可以闭合浮动了,真是因为父元素创建了新的BFC。

 

IE6-7的显示引擎使用的是一个称为布局(layout)的内部概念,由于这个显示引擎自身存在很多的缺陷,直接导致了IE6-7的很多显示bug。当我们说一个元素“得到 layout”,或者说一个元素“拥有 layout” 的时候,我们的意思是指它的微软专有属性 hasLayout http://msdn.microsoft.com/worksh ... rties/haslayout.asp 为此被设为了 true 。IE6-7使用布局的概念来控制元素的尺寸和定位,那些拥有布局(have layout)的元素负责本身及其子元素的尺寸设置和定位。如果一个元素的 hasLayout 为false,那么它的尺寸和位置由最近拥有布局的祖先元素控制。

 

触发hasLayout的条件:

 

 

在 IE7 中,overflow 也变成了一个 layout 触发器:

 

  • overflow: hidden|scroll|auto ( 这个属性在IE之前版本中没有触发 layout 的功能。 )
     
  • overflow-x|-y: hidden|scroll|auto (CSS3 盒模型中的属性,尚未得到浏览器的广泛支持。他们在之前IE版本中同样没有触发 layout 的功能)

 

 

 

IE8使用了全新的渲染引擎,删除了 hasLayout 原本的功能,因此彻底杜绝了很多深恶痛绝的 bug,但 IE8~IE11 通过「document.documentElement.currentStyle.hasLayout」依然可以获得 hasLayout 的标志,我写了一个测试 Demo(IE8 中 zoom:1 返回 false),更详细的请看《IE8 haslayout = true》

 

IE8-11获取 hasLayout

 

综上所述:

 

在支持BFC的浏览器(IE8+,firefox,chrome,safari)通过创建新的BFC闭合浮动;

 

在不支持 BFC的浏览器 (IE6-7),通过触发 hasLayout 闭合浮动。

 

 

 

四、闭合浮动方法——精益求精

 

上面已经列举了7种闭合浮动的方法,通过第三节分析的原理,我们发现其实更多的:display:table-cell,display:inline-block等只要触发了BFC的属性值都可以闭合浮动。从各个方面比较,after伪元素闭合浮动无疑是相对比较好的解决方案了,下面详细说说该方法。

 

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

 

.clearfix { *zoom:1; }

 

1) display:block 使生成的元素以块级元素显示,占满剩余空间;

 

2) height:0 避免生成内容破坏原有布局的高度。

 

3) visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互;

 

4)通过 content:"."生成内容作为最后一个元素,至于content里面是点还是其他都是可以的,例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙;

 

5)zoom:1 触发IE hasLayout。

 

通过分析发现,除了clear:both用来闭合浮动的,其他代码无非都是为了隐藏掉content生成的内容,这也就是其他版本的闭合浮动为什么会有font-size:0,line-height:0。

 

 

 

精益求精方案一:

 

相对于空标签闭合浮动的方法代码似乎还是有些冗余,通过查询发现Unicode字符里有一个“零宽度空格”,也就是U+200B ,这个字符本身是不可见的,所以我们完全可以省略掉 visibility:hidden了

 

.clearfix:after {content:"200B"; display:block; height:0; clear:both; }

 

.clearfix { *zoom:1; }.

 

精益求精方案二:

 

由Nicolas Gallagher 大湿提出来的,原文:A new micro clearfix hack,该方法也不存在firefox中空隙的问题。

 

/* For modern browsers */

 

.cf:before,.cf:after {

 

content:"";

 

display:table;

 

}

 

.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */

 

.cf { zoom:1; }

 

 需要注意的是:

 

上面的方法用到了  :before伪元素,很多人对这个有些迷惑,到底我什么时候需要用before呢?为什么方案一没有呢?其实它是用来处理margin边距重叠的,由于内部元素 float 创建了BFC,导致内部元素的margin-top和 上一个盒子的margin-bottom 发生叠加。如果这不是你所希望的,那么就可以加上before,如果只是单纯的闭合浮动,after就够了!并不是如同大漠《Clear Float》一文所说的:但只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug,这不是bug,是BFC应该有的特性。

 

边距叠加测试.jpg

 

请看优雅的Demo

 

进一步了解请看: 《clearfix改良及overflow:hidden详解【译】》

 

在实际开发中,改进方案一由于存在Unicode字符不适合内嵌CSS的GB2312编码的页面,使用方案7完全可以解决我们的需求了,改进方案二等待大家的进一步实践。方案3、4通过overflow闭合浮动,实际上已经创建了新的 块级格式化上下文,这将导致其布局和相对于浮动的行为等发生一系列的变化,闭合浮动只不过是一系列变化中的一个作用而已。所以为了闭合浮动去改变全局特性,这是不明智的,带来的风险就是一系列的bug,比如firefox 早期版本产生 focus,截断绝对定位的层等等。始终要明白,如果单单只是需要闭合浮动,overflow就不要使用,而不是某些文章所说的“慎用”。

前前后后花了三天写完了这篇文章。如果觉得本文对您有帮助,您的留言就是对我最大的支持,同时由于精力有限,欢迎指出文中错误与不足,共勉之!

分享到:
评论

相关推荐

    HTML5 清除浮动

    清除浮动是一个解决CSS布局问题的关键技术,特别是当我们在处理浮动元素时。 在CSS中,浮动(float)属性主要用于创建多列布局或让文本环绕图像。当一个元素被设置为浮动,它会脱离正常的文档流,向左或向右移动,...

    css中3种清除浮动方法

    为了解决这个问题,CSS提供了多种清除浮动的方法。本文将详细讲解三种清除浮动的方法。 1. **传统方式:添加额外的 clearing div** 在浮动元素之后,可以添加一个额外的`&lt;div&gt;`并为其设置样式`clear: both;`。这...

    清除浮动和解决margin的塌陷的方法

    浮动的原理 ,介绍清除浮动几种方法。以及margin塌陷的产生和解决margin的塌陷的方法

    清除浮动动态演示.html

    浮动的属性虽然方便使用,但是在使用这种属性时,也存在着一种弊端,那就是当子元素设置了float属性之后,且父元素的宽度没有设置...所以这里我们说的清除浮动,指的是清除子盒子添加浮动效果后造成的父盒子高度塌陷。

    导航条字体加粗 清除浮动 minyout 4.390v

    COME-IN FROM 导航条字体加粗 清除浮动 minyout 4.390v.

    清除浮动示例_xiongxiong.html

    浮动的属性虽然方便使用,但是在使用这种属性时,也存在着一种弊端,那就是当子元素设置了float属性之后,且父元素的宽度没有设置...所以这里我们说的清除浮动,指的是清除子盒子添加浮动效果后造成的父盒子高度塌陷。

    清除浮动.pdf

    解决这个问题,通常需要采用一些技术来“清除浮动”。 1. **清除浮动(Clearing Floats)**: - 最传统的方法是在父容器内部添加一个额外的标签,如`&lt;div class="clear"&gt;&lt;/div&gt;`,并设置`clear: both;`。这种方法...

    清除浮动的几种方法PPT学习教案.pptx

    清除浮动的几种方法 清除浮动是指在CSS中,浮动元素脱离文档流,导致父级元素无法自动获取到高度的问题。清除浮动是每一个web前台设计师必须掌握的机能。下面将介绍几种清除浮动的方法: 1. 对父级设置适合的CSS...

    css清除浮动的方法有哪些?.docx

    CSS清除浮动是为了应对浮动元素对周围元素布局的影响,特别是防止父元素因子元素浮动而高度塌陷的问题。在Web开发中,有多种方法可以清除浮动,以下将详细介绍四种常见的清除浮动的方法。 一、使用带有`clear`属性...

    xhtml+css清除浮动的3种方法

    ### XHTML + CSS清除浮动的三种方法 在XHTML与CSS页面重构过程中,处理浮动元素是一项关键技术。当元素被设定为浮动后,它们会脱离正常的文档流,并向左或向右移动,直到碰到容器边缘或其他浮动元素。这为布局带来...

    CSS技术:清除浮动的最优方法.pdf

    因此,需要使用清除浮动的技术来解决这一问题。本文档将探讨清除浮动的多种方法,并分析其优缺点,以找出所谓的“最优方法”。 首先,浮动(float)属性是CSS中用于布局的主要属性之一。当元素设置为浮动状态时,它...

    清除浮动.docx

    为了解决这个问题,有多种清除浮动的方法。 1. **传统方法:额外元素清除** 这是最原始的方法,即在父容器内添加一个额外的元素,通常使用`&lt;div class="clear"&gt;&lt;/div&gt;`,并为其设置样式`clear:both`。这样,这个...

    CSS清除浮动_2种方法源代码.zip

    本文将详细讲解两种常见的CSS清除浮动的方法,并通过提供的源代码进行实例解析。 ### 方法一:clearfix类 `clearfix` 类是最常用的清除浮动方法之一,它并不需要添加额外的HTML元素,而是利用CSS伪类来解决。这种...

    H5 溢出隐藏和缩略图和清除浮动

    在本话题中,我们将探讨“H5溢出隐藏”、“缩略图”和“清除浮动”这三大关键概念,以及它们在实际网页布局中的应用。 一、H5溢出隐藏 在H5中,“溢出隐藏”是通过CSS来实现的一种布局技巧,用于处理内容超出容器...

    div+css清除浮动

    div+css清除浮动

    清除浮动的几种方法.md

    清除浮动的几种方法.md

    浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么

    我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)? 很多人都已经习惯称之为清除...

    CSS的clear属性清除浮动的基本用法示例

    清除浮动是指通过CSS样式来防止浮动元素对周围元素的影响,确保非浮动元素或后续元素能够正确地在页面上定位,避免内容溢出容器。这通常是为了恢复父容器的正常高度计算,使其能完全包裹住内部的浮动元素。 **使用`...

    css 完美清除浮动的两种解决方案

    为了解决这个问题,我们通常需要“清除浮动”。本文将介绍两种常见的清除浮动的方法:使用`clear:both`和使用伪元素。 1. **使用`clear:both`** 在HTML中,我们可以创建一个空的`div`元素,并为其添加`clear:both`...

Global site tag (gtag.js) - Google Analytics