四、深入剖析CSS中的浮动布局

在平常的css样式设计中，经常会使用到float属性，一看到这一属性，我就会下意识地反应，这是浮动，但是浮动到底是什么，浮动的影响是什么，如何消除浮动，我一直处于知其然而不知其所以然的状态，所以时隔一个星期，写下了这篇文章。

浮动的原理是使元素脱离普通流(称呼为文档流也可)，使其可以左右浮动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。

对内联元素浮动我们会惊讶地发现，我们居然能对其设置宽高，原因是当元素浮动时，会触发BFC（Block Formatting Context）块级格式化上下文，这时创建的BFC元素就是一个独立的盒子。也就是说，元素设置浮动后，元素就会变成BFC元素，这时候它就类似于inline-block(内联块级元素)的效果。

想详细了解BFC的同学请转: http://www.cnblogs.com/tim100/p/6056533.html#top。

浮动有什么好处和影响呢？

影响：

1、众所周知，浮动后元素会脱离普通文档流，如果父元素的高度是由该浮动元素填充的话，就会出现高度崩塌的问题，这时候浮动紧邻的块级元素会填充浮动元素遗留下来的空间，发生重叠，浮动层在上面。

2、会对附近元素布局造成影响，可能导致布局混乱问题。

好处：

1、浮动可以解决块级元素独占一行的问题。因为浮动后，元素就变成了BFC元素，并且脱离了普通流(文档流)，在设置多列布局的时候可以使用。

2、浮动后的元素可以设置宽度和高度等。原理同上。

我们该如何消除元素浮动带来的影响呢？

清除浮动可以分为以下两种：
清除浮动：使用clear元素清除外面浮动，解决外面浮动对自己的影响。对应CSS中的属性是 clear：left | right | both | none；
闭合浮动：当前块级中，其子元素使用了浮动，会给当前块内部和块外部的布局带来影响，所以使浮动元素闭合，从而减少浮动带来的影响。

闭合浮动有以下3种方法：

一：通过在浮动元素的末尾添加一个空元素，设置 clear：both属性；
缺点：成本太高，额外添加了一个元素，维护困难

二：通过设置父元素使其成为BFC元素来闭合浮动。
触发元素BFC:
浮动元素: float除none以外的值。
绝对定位元素: position: absolute | fixed。
display为inline-block、table-cells、flex。
overflow除了visible以外的值。hidden | auto | scroll。

三（推荐）：使用伪元素：after,下面是代码，即相当于方法一的给一个空元素设置clear: both属性，却不需要额外添加新元素。

.clearfloat{
  zoom:1;
}
.clearfloat:after{
  content: ''; 
  display: table; 
  clear: both;
}

这时候又有新的疑问，为什么overflow: hidden能够清除浮动呢？

因为当元素设置了overflow: hidden了之后，元素就成为了一个BFC元素了，BFC元素间或者内是不会发生重叠问题的(因为BFC元素计算时将浮动元素的宽高计算在内)，此时就能够清除掉元素浮动带来的影响了。

结语

通过上文，我们可以知道，浮动和BFC息息相关，如果想要弄懂浮动布局，BFC也必须了解。