清除浮动的几种方法

浮动是个什么东西，为什么要清除浮动

浮动（float）是 CSS 中的一种布局方式,是CSS的定位属性之一。用来实现在web开发中传统印刷布局的文字环绕图片的效果，它的渲染位置在行框与包含块之间，这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。float仍然是文档流的一部分，这与绝对定位有极大的不同，因为绝对定位元素完全脱离文档流了。float的值有四个：left、right、Inherit 和none(默认值)。。float除了实现文本环绕的效果外，还经常被用来创建网页布局。如果父元素只包含浮动元素，那么父元素的高度就会是0，同时浮动会影响后面的元素位置。这会给使用浮动的网页布局带来很多问题，因此在我们使用浮动的时候，要注意清除浮动。

清除浮动的方法

可以用来清除浮动的方法有下面几种：

1、   使用clear:both。如果我们明确的知道紧接着浮动元素后面的元素，可以使用这种方法来清除浮动。这种方法简单，容易使用，不需要hack，语义化也不错。

<style>.clearfix{ clear: both; } </style>
<div class="clearfix"></div> 

2、采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素；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 同样可以使容器包含浮动元素。兼容IE6/7的使用方法：

.clearfix {
  overflow: hidden;     /* 清除浮动! */
  zoom: 1;              /* IE触发"hasLayout"*/
  display: block;       /* 包含内容的元素是块元素.除非元素默认是块元素*/
} 

在使用这种方法时要注意，可能会产生下面的问题：

• 容器可能不会出现滚动条，这样会隐藏容器内的内容和子元素；或是出现不必要的滚动条。
  
• 对margin、border、outline和绝对定位的png图片产生干扰。
• 影响CSS3属性的应用，比如box-shadow，text-shadow，transform等。

3、空div方法。这个方法一般是不推荐使用的，虽然没有什么副作用的，但因为这个div纯粹是为了表现，没有语义。

4、使用浮动父元素清除。当元素设置 float:left/float:right 时 ，同样也创建了 CSS 2.1 规范定义的 Block Formatting Contexts。这样父容器也就包含了浮动元素高度。同时，这个样式也会在 IE 6/7 内触发 hasLayout 特性，拥有这个特性的元素也可以计算出浮动元素的高度，使父元素包含他们。虽然这种方式并没有兼容问题，但实际使用中并不推荐。因为很容易推断出，页面中只要有一个浮动元素，使用该方法清理浮动将不可避免的使页面所有元素都浮动才可以达到预期效果。

5、目前比较推荐的方法是采用伪类:after，动态建立一个块元素，设定 clear 属性，清理之前的浮动元素；需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout

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

}
/* IE 6/7浏览器 (触发hasLayout) */
.clearfix {
  *zoom:1;
}  

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

   CSS浮动属性Float详解

   CSS架构：最新最佳实践

   清理浮动的那些事儿（1）——6种清理浮动的方法