浮动布局float带来的高度塌陷——清除浮动 clearfix

今天药忘吃喽~ 2022-05-22 09:52 288阅读 0赞

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

1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；

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

两者的区别[ 请看优雅的 Demo][Demo]

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

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

## 二、为何要闭合浮动？ ##

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

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

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

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

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

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

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

1）添加额外标签

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

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

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

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

</div>

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

[ 优雅的 Demo][Demo]

优点：通俗易懂，容易掌握

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

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

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

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

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

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

</div>

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

[ 优雅的 Demo][Demo]

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

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

3)父元素设置 overflow：hidden

通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 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][Demo]

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

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

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

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

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

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

5）父元素也设置浮动

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

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

6）父元素设置display:table

[ 优雅的 Demo][Demo]

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

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

7）使用:after 伪元素

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

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

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

原文全部代码如下:

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

.clearfix \{ \*zoom:1; \}

[ 优雅的 Demo][Demo]

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

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

小结

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

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

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

在CSS2.1里面有一个很重要的概念，但是国内的技术博客介绍到的比较少，那就是[ Block formatting contexts ][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，但是它会产生[匿名框][Link 2](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)块级格式化上下文会阻止外边距叠加 ###

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

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

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

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

详见： W3C CSS2.1 - 10.6.7 '[Auto' heights for block formatting context roots][Auto_ heights for block formatting context roots]

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

至此，您或许明白了为什么 overflow:hidden或者auto可以闭合浮动了，真是因为父元素创建了新的BFC。对于张鑫旭在对[《overflow与zoom”清除浮动”的一些认识 》][overflow_zoom_]一文中对于用包裹来解释闭合浮动的原理，我觉得是不够严谨的，而且没有依据。并且说道“Firefox等浏览器并没有haslayout的概念”，那么现代浏览器是有BFC的，从表现上来说，hasLayout 可以等同于 BFC。

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

触发hasLayout的条件：

*  position: absolute   
     
 *  float: left|right   
     
 *  display: inline-block   
     
 *  width: 除 “auto” 外的任意值   
     
 *  height: 除 “auto” 外的任意值 （例如很多人闭合浮动会用到 height: 1%  ）   
     
 *  zoom: 除 “normal” 外的任意值 (MSDN) [http://msdn.microsoft.com/worksh ... properties/zoom.asp][http_msdn.microsoft.com_worksh ... properties_zoom.asp]   
     
 *  writing-mode: tb-rl (MSDN) [http://msdn.microsoft.com/worksh ... ies/writingmode.asp][http_msdn.microsoft.com_worksh ... ies_writingmode.asp]

在 IE7 中，overflow 也变成了一个 layout 触发器：

[Demo]: http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html
[Link 1]: http://www.w3.org/TR/CSS2/visuren.html#normal-flow
[overflow_hidden]: http://plod.popoever.com/archives/000309.html
[Pseudo-Element]: http://www.w3.org/TR/selectors/#pseudo-elements
[How To Clear Floats Without Structural Markup]: http://www.positioniseverything.net/easyclearing.html
[Block formatting contexts]: http://www.w3.org/TR/CSS21/visuren.html#block-formatting
[flow root]: http://www.w3.org/TR/css3-box/#block-level0
[Link 2]: http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes
[HTML5]: http://jeehon.info/log/2011/11/11/block-formatting-contexts%E5%9D%97%E7%BA%A7%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%B8%8A%E4%B8%8B%E6%96%87/www.w3.org/TR/html5/the-xhtml-syntax.html#the-fieldset-element-0
[Link 3]: http://www.w3.org/TR/CSS21/box.html#collapsing-margins
[Link 4]: http://www.tjkdesign.com/lab/bfc/test.html
[Auto_ heights for block formatting context roots]: http://www.w3.org/TR/CSS2/visudet.html#root-height
[overflow_zoom_]: http://www.zhangxinxu.com/wordpress/?p=621
[http_msdn.microsoft.com_worksh ... rties_haslayout.asp]: http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp
[http_msdn.microsoft.com_worksh ... properties_zoom.asp]: http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/zoom.asp
[http_msdn.microsoft.com_worksh ... ies_writingmode.asp]: http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/writingmode.asp