css浮动和清除浮动
浮动存在的原因
在word排版中，文本可以环绕图片。在css中，想要实现文字环绕的效果，只能借助于float，没有其他的替代方式。在实际中，文档的布局经常会使用浮动。
float属性
float属性，默认为none，也就是标准流通常的情况。如果将float的属性的值设置为left或right，元素就会向其父元素的左侧或右侧紧靠。
inherit表示从父元素继承float属性的值。
clear属性
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear
属性的元素）增加上外边距实现的。
在 CSS2.1
中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的
上外边框边界刚好在该边上浮动元素的下外边距边界之下。
clear的默认值为none，允许浮动元素出现在两侧。left表示在左侧不允许浮动元素。right表示在右侧不允许浮动元素。both表示在左右两侧均不允许出现浮动
元素。inherit表示从父元素继承clear属性的值。
浮动带来的影响
1）宽度不会自动伸展，而是以内容为准。
2）脱离标准流，而独立存在。
3）对后边标准流的文字产生影响，而使文字环绕它排列。
4）容器中的子div都是浮动的，容器无法获取子div高度，不会自动伸展。如果想自动伸展，可以设置一个标准流的div，并且这个div清除浮动。
清除浮动的方法
所谓的清除浮动，准确的说法是清除浮动带来的影响。主要针对上面的第3点和第4点。
如果你很明确的知道接下来的元素会是什么，可以使用
clear:both; 来清除浮动。这个方法很不错，它不需要
hack，不添加额外的元素也使得它
有良好的语义性。
当然事情并不是都可以这样解决的，工具箱中还是需要另外几个清除浮动的工具。
1）空div方法
从字面来看，是一个空的 div。
。有时可能会用或者一些其他元素，但是 div 是最常用的，因为它没有浏览器默认样式；没有特殊功能，而且一般不会被
css
样式化。这个方
法因为只是为了表现，对页面没有上下文涵义而被纯语义论者嘲笑。诚然，从严格的角度来说他们是对的，但是这个方法有效而且没有任何伤害。
.clearfix {clear:both;}
2）overflow 方法
在父元素上设置 overflow 这个 css 属性。如果父元素的这个属性设置为 auto 或者
hidden，父元素就会扩展以包含浮动。这个方法有着较好的语义性，
因为他不需要额外元素。但是，如果需要增加一个新的 div 来使用这个方法，其实就和空
div 方法一样没有语义了。而且要记住，overflow
属性不是为
了清除浮动而定义的。要小心不要覆盖住内容或者触发了不需要的滚动条。
.fix{overflow:hidden; zoom:1;}
3）after伪类+content 方法
简单清除方法使用了一个聪明的 css 伪选择符(:after)来清除浮动。比起在父元素上设置
overflow，只需要给它增加一个额外的类似于”clearfix”的类。
这个类使用如下
css:
.clearfix{zoom:1;}
.clearfix:after{display:block; content:‘clear‘;
clear:both; line-height:0; visibility:hidden;}
清除浮动的原理
Block Formatting Context可以很好地解释清除浮动的原理。
1）BFC的通俗理解：
Block Formatting Context（块级格式化上下文）是W3C CSS
2.1
规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
简单来讲，我们可以把它理解为，我们在进行盒模型布局的时候，如果一个元素符合了成为BFC的条件，该元素成为一个隔离了的独立容器，元素内部元素会垂直
的沿着其父元素的边框排列，和外部元素互不影响
。比如浮动元素会触发BFC，浮动元素内部的子元素主要受到该浮动元素的影响，而两个浮动元素之间是互不影响的。
在CSS3 中，BFC 叫做Flow Root。在早期的ie中也有类似的概念haslayout
IE6、7的很多布局产生的bug（如3px间隙、绝对定位的继承宽度）都可以通过触发hasLayout
修复，比较推荐的方法为zoom:1与height:1%，不会破坏已有的样式，相信大家对它并不陌生。
同样的以往集中在float、绝对定位、margin collaspe中的很多困惑，在理解了bfc后，都能够被我们一一解除 。
2）BFC规范中的定义：
w3c规范对BFC的解释：
浮动元素和绝对定位元素，不是块级盒子的块容器
（如 inline-blocks, table-cells, 和 table-captions），以及设置了overflow属性（除了visible）的块级盒子
，
都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地
一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin
值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距
会产生折叠。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
3）触发BFC的方法：
float
元素
position（absolute，fixed）
display
(table-cell，table-caption，inline-block)
overflow 除了visible
以外的值（hidden，auto，scroll ）
fieldset元素
【注】CSS3中，将Block-formatting-contexts
叫做 flow root。对于触发方式也做了修改：The value of ‘position’ is neither ‘static’ nor
‘relative’；
那么在IE/win中，就依靠那个“hasLayout”了，
4）触发“hasLayout”的方法：
a.浮动元素
b.绝对定位元素
c.display:inline-block
d.zoom：比如常见的设置zoom：1；
e.width/height,比如设置height：1%的方法；
f.overflow/overflow-x/overflow-y
[IE7 新增]；
g.max/min-width/height [IE7 新增]；
5）BFC的特性
边缘不和浮动元素重叠
不存在collapsing
margins问题
第一个特性特别有用，因为元素触发了BFC的话，就不会被float元素覆盖，当子元素全部浮动的时候也能够正确地包含了
第二个margin不会叠加的特性，可以理解为两个处于普通流的盒子，会有margin叠加的问题，是因为他们属于相同的BFC，当他自身创建了一个新的BFC时，这个问题就不存在了
参考文章
http://kayosite.com/remove-floating-style-in-detail.html
http://www.qianduan.net/about-float.html
http://www.cnblogs.com/zorroLiu/archive/2011/04/12/2013901.html
http://www.cnblogs.com/v10258/p/3530290.html
http://www.w3school.com.cn/cssref/pr_class_float.asp
http://www.w3school.com.cn/cssref/pr_class_clear.asp