一起来清除那些可爱又麻烦的浮动吧

CSS

参考资料：

1. http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best#
2. http://cssmojo.com/the-very-latest-clearfix-reloaded/

我们都知道，使用float的时候会使元素脱离文档流，直白点儿说就是其他元素就会忽略浮动元素的存在(以至于影响到兄弟元素的位置以及导致父元素高度塌陷)，那如果遇到了下面这样的情况

<div class="container">
    <div class="left">/div>
    <div class="right"></div>
    <div class="middle"></div>
</div>

左右侧栏宽度固定且都是浮动元素且高度不定，但是想让中间元素自适应宽度，父元素始终包裹住三个元素该怎么办呢？在做百度前端技术学院任务三的时候就遇到了这个问题。中间元素自适应宽度这个很好解决，直接使用margin将左右侧栏的位置空出就可以了，但是父元素怎么自适应浮动元素高度呢，其实道理很简单，就是要清除浮动嘛，但是清除浮动有很多方法，一起来看看这个可以怎么解决

使用overflow

参考资料：http://www.quirksmode.org/css/clearing.html

1. 经常是使用overflow用来处理溢出时元素框的表现，但是其实overflow还有清除浮动的作用，这是因为在父元素上加上设置overflow的值不为visible以外的值时，会触发BFC，而BFC的特性之一就是可以包含浮动的元素（其实就是自适应子元素的高度），所以只要设置
   .container {overflow: hidden;/*scroll或者auto也可以*/}
2. 弊端: 很明显scroll无论我们需不需要都会产生滚动条，而hidden可能会在覆盖掉所需要的元素，auto更不必再提，但是假如使用hidden的时候我们确定container的高度是可变的并且确定内容物的宽度不会超过container的宽度就不会出现覆盖的问题，但是从另外一方面来说，我们开发的时候只能尽管可以测试各种浏览器下的布局但是在众多用户使用的情况下，也许会出现有其他的css样式影响浏览器的性能导致出现各种问题，所以这种方法并不是可靠的方法
3. 关于什么是BFC，详解BFC写的很清楚这里不再赘述

末尾增加空的div来闭合

1. 直接在上面代码中的类名为middle后面增加<div class="down"></div>并且给其设定样式为clear:both; ,因为div本身唯一的样式就是display:block;所以这个空的div会在left，middle，right的下面换行并增一个空的div，又因为其没有内容所以不影响布局且达到父元素自适应的目的
2. 弊端： 增加没有含义的div，背离了结构与表现分离的原则，并且不能实现模块复用，后期维护也不方便

使用after伪元素

1."Reloaded clearfix" 和"Beat That ClearFix"

参考资料：
http://cssmojo.com/the-very-latest-clearfix-reloaded/

与增加空div类似，Thierry Koblentz在CSS MOJO里面写过清除浮动采用的是对父元素增加一个类假定叫clearfix(为了可以更好地实现代码复用所以另外增加一个类名)，本质还是在父元素后加上一个内容为空的div并且清除前面父元素里面的所有的浮动，如果是要兼容IE6,7就要加上.clearfix {zoom: 1;}来触发IE的hasLayout。

<--html-->
<div class="container clearfix">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</div>
<--css-->
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

2. "Micro Clearfix"

参考资料：http://nicolasgallagher.com/micro-clearfix-hack/

这个和上面的例子基本一致，只是将产生的伪元素display设为table，可以产生一个匿名框anonymous table-cell以及触发BFC，但是使用table的时候使父元素和其兄弟元素之间的垂直margin不合并--demo，这个和CSS里面垂直方向外边距合并这个默认的样式不同不太符合我们的习惯，并且，从web语义化的角度来看也没必要使用display: table;造成不必要的误解； 而：after伪元素可以清除父元素中的浮动，content内容不为空所以要加visibility:hidden;来隐藏其中的内容

.clearfix:before,
.clearfix:after {
    content: ".";
    display:table;
    visibility: hidden;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}/*也可改为content:"\2008",是Unicode里面的零宽            度元素，这样就不必再使用`visibility:hidden;`了*/

3. 最原始的"clearfix"

参考资料：http://www.positioniseverything.net/easyclearing.html
（没有mac所以无法验证，但是mac下的IE也在不断发展，这个最原始的版本已经稍显麻烦且没必要了）

`.clearfix {
    display: inline-block;/*for IE/mac*/
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;/*将content中的内容高度设为0*/
    clear: both;
    overflow: hidden;/*触发IE haslayout*/
    visibility: hidden;/*隐藏content中字段*/
}
.clearfix {
    display: block;/*重新将容器设为block*/
}`