文章来源：成都理工 2016级 施明财浮动从哪儿来
在我们进行页面布局的时候，常常会用到float，让元素浮动起来，这会让我们很方便地让块级元素并排显示。为什么要清除浮动
虽然float很好用，但也会给我们带来问题。
在父级元素没有设置高度的情况下，原本高度会让其内容撑开，但在我们使用float的时候，会导致元素脱离文档流，使父级元素高度塌陷——content高度变为0，会影响父元素兄弟元素的排版。
从上面我们可以看到，在使用浮动后，使父级元素的高度塌陷了！
怎样清除浮动
为了解决浮动使父元素高度塌陷的问题，我们就要想办法清除浮动，使父元素呈现正常高度。
想要清除浮动，我们可以使用这几种方法。
一、 给父元素设置高度
最简单粗暴的解决方案 首当其冲应该是 直接给父元素加 固定高度
二、 添加额外标签
在浮动元素的末尾添加一个宽高为0,的额外元素，并给它设置clear:bothcss代码:
1.#d4{ 2. width: 0; 3. height: 0; 4. clear: both; 5. }Html代码：
1.<div id="box"> 2. <div id="d1"></div> 3. <div id="d2"></div> 4. <div id="d3"></div> 5. <div id="d4"></div> //额外的标签 6.</div>
三、 给父级设置overflow: hiddencss代码:
1.#box{ 2. margin: 10px; 3. width: 740px; 4. border: 1px solid #000000; 5. overflow: hidden; //设置overflow: hidden（也可用auto） 6. }
四、 让父级也浮动css代码:
1.#box{ 2. margin: 10px; 3. width: 740px; 4. border: 1px solid #000000; 5. float: left; //让父级也浮动 6.}
五、 给父级设置display：tablecss代码:
1.#box{ 2. margin: 10px; 3. width: 740px; 4. border: 1px solid #000000; 5. display: table; //给父级设置display: table 6.}
六、 使用:after
通过伪元素:after给父元素追加如下clearFloat类css代码:
1..clearFloat:after{ 2. content: ""; 3. height: 0; 4. clear: both; 5. display: block; 6. visibility: hidden; 7.}HTML代码：
1.<div id="box" class="clearFloat"> 2. <div id="d1"></div> 3. <div id="d2"></div> 4. <div id="d3"></div> 5.</div>
通过上面的方法清除浮动后我们最终都能实现如下效果：
上面方法三、四、五都用到了BFC的原理，我们就不得不提一下什么是BFC了，W3C CSS2.1规范中对BFC有如下概念：BFC概念
BFC决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。
相信很多小伙伴听到这里都一脸懵逼，我们可以把BFC理解成是一个独立的容器，并且这个容器里的box的布局，与这个容器外的毫不相干。
那么，怎么才能触发BFC呢？怎样触发BFC
1)float的值不为none。
2)overflow的值不为visible。
3)display的值为table-cell, table-caption, inline-block中的任何一个。
4)position的值不为relative和static。
很多小伙伴听到这里还是一脸懵逼，大家也不要太懊恼，毕竟BFC的定义对于我们这种前端初学者来说理解起来还是很困难的，后面实际上手做的东西多了自然就理解了，我们不妨从它的作用来来让大家对BFC有一个初步的理解。BFC作用
一、清除浮动：
第一个作用就是我们刚刚讲的清除浮动了，子元素因为使用了float触发了BFC，使之不再处于普通文档流之中，这时候我们就可以让父元素也触发BFC，这样就能把子元素包起来了。
在我们让父元素触发BFC时，要考虑到给它新加的属性会不会影响到别的元素，不然就相当于“挖东墙补西墙”了，所以要根据实际情况选择选择恰当的方式。
二：解决上下元素边距重叠：
根据 CSS 2.1 8.3.1 Collapsing margins 第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。也就是处于同一个BFC中的两个垂直窗口的margin会重叠。CSS代码：
1..box1{ 2. height: 200px; 3. width: 200px; 4. background-color: cyan; 5. margin-bottom: 30px; //盒子一下边距为30个像素 6.} 7..box2{ 8. height: 200px; 9. width: 200px; 10. background-color: tomato; 11. margin-top: 20px; //盒子二上边距为20个像素 12.}HTML代码：
1.<div class="d1"></div> 2.<div class="d2"></div>效果如下：
我们可以看到上面两个盒子边距重叠了，两个盒子之间的距离为其中较大的边距。
根据 CSS 2.1 8.3.1 Collapsing margins 第三条，生成 block formatting context 的元素不会和在流中的子元素发生空白边折叠。所以解决这种问题的办法是要为两个容器添加具有BFC的包裹容器。CSS代码：
1..box1{ 2. height: 200px; 3. width: 200px; 4. background-color: cyan; 5. margin-bottom: 30px; //盒子一下边距为30个像素 6.} 7..box2{ 8. height: 200px; 9. width: 200px; 10. background-color: tomato; 11. margin-top: 20px; 12.} 13..BFC{ 14. overflow: hidden; //盒子二下边距为20个像素 15.}HTML代码：
1.<div class="BFC"> 2. <div class="d1"></div> 3. </div> 4.<div class="BFC"> 5. <div class="d2"></div> 6.</div>效果如下：
可以看到上下两个盒子距离变大，为两个margin相加变成了50个像素。
通过上面例子，通俗来讲，我们可以这样理解BFC的作用：
一、帮助爸爸找到离家出走的儿子；
二、亲兄弟，明算账。
