最近在总结一些以前了解的知识，对于css来说，清除浮动是一个知识点。
那我们来看看浮动是什么。当然我们要先提一提常规文档流（额，这里主要参考《CSS权威指南》，但书中没解释常规文档流，那就我自己按理解来解释一下了）。
常规文档流（normal flow）：就是除去浮动元素（float）、绝对定位（position：absolute）后的所有元素，按照它们在html文档中出现的顺序及其自身的属性（块级元素，行内元素等）生成的排版。
浮动的特点：好吧，就是有了float属性的元素会脱离常规文档流，尽量的跑到父元素的顶部，据说CSS设计float属性的主要目的，是为了实现文本绕排图片的效果，然而，这个属性居然也成了创建多栏布局最简单的方式（@《CSS权威指南》）；并且，既然浮动元素脱离了文档流，其父元素也就看不到它了，因而也不会包围它，导致父元素盒模型不能被撑开，这样就会造成许多布局上的问题。
好了，既然已经了解了什么是浮动，那我们就来说一下三种清除浮动的方法：
1.子元素计算高度，为父元素设定高度，适合一些高度固定的地方（。。。这个方法还是不要用了，实在是不太实用）。
2.这个方法很简单，缺点是不太直观，即为父元素应用overflow:hidden，以强制它包围浮动元素（触发BFC，BFC这个概念先不说了，当然这个方法也会有一些副作用，比如导致内容被隐藏掉等等一些bug，不推荐使用）。
3.让父元素也浮动起来，即设置float属性（同样也是触发BFC，这个，我们总不能一直浮动下去吧，当然有时候还是挺适合的，看情况使用了）。
4.给父元素的最后添加一个非浮动的子元素，然后清除该子元素，一般也有两种方式实现它：
a.在父元素标记中的最后添加一个子元素，并给它应用clear属性，e.g.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>float的清除</title> <style> .floatDiv { float: left; } .clear { clear: both; } </style> </head> <body>
<div> <div class="floatDiv"> 我是浮动元素 <div> <div class="clear"> <div> </body>
这样，浮动的元素被父元素包围住了，但会添加一个纯表现性元素，显得不太符合语义化的要求，当然，还有更好的b方法。
b.直接给父元素添加一个类，给它加上一点点修饰，e.g.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>float的清除</title> <style> .floatDiv { float: left; } .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } </style> </head> <body> <div class="clearfix"> <div class="floatDiv"> 我是浮动元素 <div> <div> </body>
像这样给父元素的最后加上一个伪元素：一个很小的句点，作为非浮动元素，同时设置其height，visibility属性确保它在页面上不可见，然后clear:both使得它可以清除左、右两边的浮动元素。
好了，关于浮动先说到这。
分割线来了，昨天只是说了一半，我们提到了一个名词——BFC，还没有解释和了解，对于这个概念，我也看了不少的文章来了解，那现在就来说一下（可能会引用我看过的其他文章的语句，还请见谅了）。
先直译一下BFC（Block Formatting Context）：块级-格式化-上下文，很不直观对不对，简单说就是，页面中触发了某些特定条件的块级元素（display属性为block，list-item，table的元素）所拥有的一套渲染规则，其规定了自身子元素如何定位，以及如何与自身相邻元素相互作用和排布，而且在这个环境里面的子元素是不受外界影响的，反之亦然，同时它还是属于文档中的普通流(normal flow)。
如何形成BFC
1.根元素
2.float属性不为none
3.position属性为absolute或fixed
4.display属性为inline-block，table-cell，table-caption等
5.overflow属性不为visible
BFC的一些特性
1.BFC会阻止外边距叠加
当两个相邻的块框在同一个BFC中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于BFC，那么它们的外边距就不会叠加。
e.g.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>margin的叠加</title> <style> p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; } </style> </head> <body> <p>HaHa</p> <p>HeHe</p> </body>
效果：
两个p之间的外边距为100px，发送了margin重叠。
根据规则：当两个相邻的块框在同一个BFC中时，它们之间垂直方向的外边距会发生叠加，但如果这两个相邻的块框不属于BFC，那么它们的外边距就不会叠加。
我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个p便不属于同一个BFC，就不会发生margin重叠了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>margin的叠加</title> <style> .wrap { overflow: hidden; } p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; } </style> </head> <body> <p>HaHa</p> <div class="wrap"> <p>HeHe</p> </div> </body>
效果:
这样它们间的距离就为200px了。
2.BFC不会重叠浮动元素
3.BFC可以包含浮动
这样我们上面清除浮动方法中的2（使overflow属性不为auto）和3（设置float属性不为none）方法应该叫做包含浮动更合适一些，因为它们都是让父元素触发BFC，使之可以包含浮动元素。
好吧，说了这么多，我们再来谈谈如何清除（包含）浮动。
上面说了4.b的方法是最佳的方法，但还有一点点的问题，因为它应用了伪元素，而IE6、7并不支持，所以对于IE6、7，我们要触发它的BFC；。。。但它们没有BFC，没关系，对于低版本的IE，还有一个属性hasLayout，触发它的效果与BFC是几乎一样的，那怎么触发它呢
触发hasLayout的条件
1.position属性为absolute
2.float属性不为none
3.display属性为inline-block
4.width属性为auto之外的任意值
5.height属性为auto之外的任意值
6.zoom属性为normal之外的任意值
这样，对于IE8+，和其它现代浏览器我们可是使用伪元素:after的方法，对于IE6、7来说，就触发它的hasLayout就可以将浮动的问题解决了。
e.g.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>float的清除</title> <style> .floatDiv { float: left; } .clearfix { *zoom: 1; } .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } </style> </head> <body> <div class="clearfix"> <div class="floatDiv"> 我是浮动元素 <div> <div> </body>
其中的*zoom，代表的是如果为IE6、7则其zoom属性为1（*是css hack，指后面跟的属性对IE6、7有效）
这样，我们就找到了清除（闭合）浮动的最佳方法了。
当然最后，我们要加上我们主要参考的文章——前端精选文摘：那些年我们一起清除过的浮动以及前端精选文摘：BFC 神奇背后的原理
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
