css闭合（清除）浮动

2015-01-15

经常在写页面的时候会碰到一种情况，明明有子元素，为什么父元素高度为0的情况，就像下面

ID为wrapper的父元素有两个子元素，但是它的高度为0！

原因：浮动元素不会影响父元素的布局（最早设计浮动这个机制的时候，就是为了实现文字环绕在图片周围的效果。所以浮动的时候，文字会环绕在浮动元素周围。）

再说下浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

浮动的影响：

1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

但是，平时布局的时候我们经常会用到float这个属性，这个时候怎么解决这个问题呢，为了解决这个问题就要说到闭合（清除）浮动了。 DEMO

闭合（清除）浮动的方法：

1）在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，其他标签br等亦可

<div class="warp" 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>

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

2）使用 br标签和其自身的 html属性
这个方法有些小众，br 有 clear=“all | left | right | none” 属性

<div class="warp" 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>

优点：比空标签方式语义稍强，代码量较少
缺点：同样有违结构与表现的分离，不推荐使用

3)父元素设置 overflow：hidden
通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；

<div class="warp" id="float3" style="overflow:hidden; *zoom:1;">
    <h2>3)父元素设置 overflow:hidden </h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    </div>
  <div class="footer">.footer</div>

优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；04年POPO就发现overflow:hidden会导致中键失效，这是我作为一个多标签浏览控所不能接受的。所以还是不要使用了

4)父元素设置 overflow：auto 属性
同样IE6需要触发hasLayout，演示和3差不多

<div class="warp" id="float3" style="overflow:auto; *zoom:1;">
    <h2>4)父元素设置 overflow:auto; </h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    </div>
  <div class="footer">.footer</div>

优点：不存在结构和语义化问题，代码量极少
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等, 请看嗷嗷的 Demo ,不要使用

5）父元素也设置浮动

<div class="warp left" id="float3">
    <h2>5)父元素也设置浮动 </h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    </div>
  <div class="footer">.footer</div>

优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用

6）父元素设置display:table

<div class="warp" id="float3" style="display:table; ">
    <h2>6)父元素设置 display:table; </h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    </div>
  <div class="footer">.footer</div>

优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用

7）使用:after 伪元素
需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多闭合浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。
由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

<div class="warp clearfix" id="float">
    <h2>7）.clearfix闭合浮动</h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
  </div>
  <div class="footer">.footer这次 warp  通过 .clearfix 已经闭合浮动了</div>

优点：结构和语义化完全正确,代码量居中
缺点：复用方式不当会造成代码量增加

8）父元素设置display:inline-block

参考文章：那些年我们一起清除过的浮动

这里再贴一个关于在 CSS 中，用 float 和 position 的区别是什么？