清除浮动的方法

浮动是什么：
浮动：浮动元素会脱离文档流并向左右移动，直到碰到父元素或者另一个浮动元素。

浮动元素不属于文档中的普通流，当一个元素浮动之后，不会影响到块级元素的布局而只会影响内联元素（通常是文本）的排列，文档中的普通流就会表现的和浮动元素不存在一样，当浮动元素高度超出包含框的时候，也就会出现父级元素不会自动升高来闭合元素（高度塌陷）。

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

清除浮动的原因：
1 影响别的元素的布局
2 造成高度塌陷

清除浮动的方法
方法一(差)：添加额外标签
使用带有clear属性的空元素

<div class="container">
  <div class="floatLeft"></div>
  <div class="floatRight"></div>
  <div class="clear"></div>
</div>

.clear{clear:both;}

优点：通俗易懂，容易掌握
缺点：将添加很多无意义的空标签，有违结构与表现的分离，后期维护会是噩梦。

方法二（差）：使用br标签及自身html属性
这个方法有些小众，br 有clear="all | left | right | none"属性

<div class="container">
  <div class="floatLeft"></div>
  <div class="floatRight"></div>
  <br clear="all">
</div>

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

方法三（差）：父元素设置overflow 属性
通过设置父元素overflow值设置为hidden;在IE6中还需要出发hasLayout,例如zoom:1;

<div class="container">
  <div class="floatLeft"></div>
  <div class="floatRight"></div>
</div>

.container{
  overflow:hidden;
  *zoom:1;
}

优点：不存在结构和语义化问题，代码量较少
缺点：overflow：hidden; 可能会隐藏掉不想被隐藏掉的东西。

方法四（差）：父元素设置display: table

<div class="container">
  <div class="floatLeft"></div>
  <div class="floatRight"></div>
</div>

.container{
  display:table;
}

优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成了一系列问题

方法五（可）：使用：after伪元素
:after 伪元素在元素之后添加内容
IE6-7不支持:after, 使用zoom:1触发hasLayout

<div class="container clearfix">
  <div class="floatLeft"></div>
  <div class="floatRight"></div>
  <div class="clear"></div>
</div>

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

1. display:block 使生成的元素以块级元素显示，占满剩余空间
   2）height:0 避免生成内容破坏原有布局的高度
   3）visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交；
   4）content:"" 生成内容作为最后一个元素，至于content里面是点还是其他都可以
   5）zoom:1 触发IE hasLayout
   分析：除了clear:both用来闭合浮动，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size:0, line-height: 0;

优化升级版本（可）：

.clearfix:before, .clearfix:after{
  content: "";
  display:table;
}
.clearfix:after{
  clearfix:both;
}
.clearfix{
  *zoom:1;  兼容IE6,7
}

清除浮动的原理
以上方法，分为2类：
第一类：在浮动元素末尾添加一个空元素（一 二 五）
第二类：设置父元素overflow 或者 display:table 来闭合浮动 （三 四）

为什么设置父元素overflow 或者 display:table 可以闭合浮动？
其原理：Block formatting contexts(块级格式化上下文)，简称BFC
如何触发BFC:
1 float 除了none以外的值
2 overflow 除了visible 以外的值（hidden，auto，scroll ）
3 display (table-cell，table-caption，inline-block)
4 position（absolute，fixed）
5 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的特性：
块级格式化上下文会阻止外边距叠加当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。
块级格式化上下文不会重叠浮动元素根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题——可以看这个测试用例）。
块级格式化上下文通常可以包含浮动详见： W3C CSS2.1 - 10.6.7 ‘Auto’ heights for block formatting context roots

通俗地来说：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。overflow:hidden或者auto可以闭合浮动，就是因为父元素创建了新的BFC。