写了两篇，发现自己给自己挖了好多坑，现在得一点点慢慢填了。这次还是继续写一篇css的内容，来看一下浮动和BFC这两个概念。

浮动float

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

这些东西都是最基本的定义，写过css的人都应该知道，不过浮动会产生很多副作用，甚至产生很多难以解释的结果，弄清楚这些问题，才是深入理解浮动属性的关键。

float的产生

首先应该知道float属性最初被设计出来的目的。float属性最早被设计出来是在很久以前，网页技术还不发达的时代，当时的页面远没有现在复杂，设计出float仅仅是为了实现图文混排，文字能像流水一样环绕在文字周围。

为了实现文字环绕效果，float做了几件事，首先是使块状元素产生类似行内元素的包裹特性–如果不设置宽度，元素会仅包裹内容而不是占一整行。另一件重要的事就是高度塌陷，一旦元素被设置成为了float，元素的父元素就会认为它的高度是0，也就是说float会使父元素塌陷。

而随着互联网的发展，网站页面越来越复杂，float被拿来实现其它的显示效果，然而由于float的独有特性，float元素是脱离文档流的。通常，只要页面中有float元素，就会存在着潜在的危险。

清除浮动

浮动有很多副作用，如何清除浮动就是一个比较有价值的问题了。清除浮动的方式有很多，根据其原理分两类场景：

使用clear属性清除浮动

clear 属性规定元素的哪一侧不允许其他浮动元素。

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

clear属性能够清除元素，不过要注意，clear属性作用在浮动元素上面是无效的，原理很简单，因为float元素是脱离文档流的。可以采用在后面加空的div标签，在空标签上使用clear:both;，不过这并不是最佳方案，因为浪费了一个标签。更好的方式是使用伪类选择器:after，为其添加属性{display:block; content:'clear'; clear:both; height:0; visibility:hidden;}
即可实现，如果要兼容不支持伪类的IE6/7，可以设置{zoom:1;}属性（zoom属性通过触发ie的 haslayout属性来实现清除浮动，由于旧版本IE几乎淡出市场，所以不做过多讨论）。

使用BFC清除浮动
用父元素创建BFC即可实现清除浮动的效果，IE6/7同样不支持BFC，解决方案还是zoom属性，在此不做多谈。下面就来详细探讨一下BFC的问题。

块级格式化上下文BFC

BFC全称是块级格式化上下文，它是指一个独立的块级渲染区域，BFC有几个很重要的特性：

内部的BOX会在垂直方向上一个接一个的放置；
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关。）
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此。（这说明BFC中的子元素不会超出它的包含块，而position为absolute的元素可以超出它的包含块边界）；
BFC的区域不会与float的元素区域重叠；
计算BFC的高度时，浮动子元素也参与计算；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；

这几点特性非常重要，在此也说一下margin重叠现象

margin重叠

margin重叠的几种情况

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），第一个子元素的上边距会和父元素的上边距合并；最后一个子元素的下边距会和父元素的下边距合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。如果这个外边距遇到另一个元素的外边距，它还会发生合并。

重叠的计算方式：

当两个margin都是正值的时候，取两者的最大值；
当margin都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；
当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

了解上面的BFC特性，我们可以很容易理解，通过创建一个新的的BFC可以消除margin重叠。

BFC另一个用途是清除浮动，我们上面已经提到了。

最后关键的问题是如何创建一个BFC，其实很简单，在css中，以下声明都可以创建BFC：

根元素
float的值不为none；
overflow的值不为visible；
display的值为inline-block、table-cell、table-caption（table会默认生成一个匿名的table-cell也可以生成BFC）；
position的值为absolute或fixed；

以上就是关于浮动和BFC的内容，总体来说，其实这些知识点属于比较保守的，倾向于向下兼容的内容，当然知识原理还是要懂的，而且这部分很重要。