浮动与清浮动（一）：浮动

在进行网页设计布局时，浮动与清浮动是最需要解决的问题之一。这篇文章记录了我在学习过程中的总结与反思，欢迎交流与指正。

以

和为例：

    
div1
	
div2
	span1
	span2

在 Firefox39 (以下简称ff）中得到如下渲染效果：

可以得出以下结论：

1. 块状元素 div 占满整行；

2. 块状元素支持宽高，不设置时宽默认占满整行，高由内容撑开；

3. 内嵌（行内）元素 span 不支持宽高，由内容撑开；

4. span 换行被解析，两个 span 之间间距4像素（即1个半角空格）。

inline-block

给 span 和 div 添加 inline-block：

在 Firefox39 得到如下渲染效果：

可以得到以下结论：

1. div 被显示为内嵌（行内）元素；

2. 换行被解析成5像素；

3. 内嵌元素支持宽高，不设置时由内容撑开。

总结：
从上面一个简单的例子，似乎可以找到浮动的第1种方法，即添加 CSS 样式``。BTW，display 的常用值还包括：inline/block/等，详见 [CSS display
属性][4]。

但是，inline-block 是 CSS2.1 新增的值，所以有必要在 IE 下进行兼容性测试（文档模式：IE7）。
未添加 inline-block 前：

可以看出，终于支持内嵌元素的上下样式设置了啊！！！
But，说好的在同一行并排显示呢？难道真的不能做朋友吗？！

总结：
IE 7 不支持块标签的 display: inline-block 样式。

float

因为 inline-block 不支持部分 IE 版本，因此尝试第二种方法：float。
添加 float: left 样式，并给 span2 设置宽高：

ff 中得到如下渲染效果：

可以看出：

1. 使块元素在一行显示;

2. 换行未被解析（各元素之间无间距）；

3. 支持宽高，不设置宽高时由内容撑开。

IE7 渲染效果如下，无 bug：

总结：
float 是浮动的利器，这也说明了为什么各大网站会普遍使用 float。 但是，追溯 float 的历史，可以知道 float 原本是用来解决图文混排的，因此滥用 float 并不可取（如同当年滥用 table 布局），前端大牛张鑫旭博客也有一篇文章专门谈到了 float 这个问题。

float 特点

1. 脱离文档流；

文档流是指文档中可显示对象在排列时所占用的位置。将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。
脱离文档流即不再按照默认的自上而上、从左至右的顺序进行排列，而是按照规定的样式进行显示。

1. 脱离文档流之后，按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止；

这里有两个注意点：一是父级边界，二是浮动元素。

Demo1:父级边界(body)
https://jsfiddle.net/ChasonZhang/9Lgugpxu/1/

	.div1 {
		float: left;
		background-color: blue;
		width: 100px;
		height: 100px;
	}
	.div2 {
		background-color: red;
		width: 200px;
		height: 200px;
        float: right;
	}

div1
div2

通过上面的 demo 可以发现，当元素 float 之后，它就会一直飘啊飘，一直飘到父级元素（此处是 body）的边界，即 content 与 border 的分界线处。
因此，如果将 div1 放在 div2 里面，同时将 div1 设置为：float:right; 那又会如何变化呢？
https://jsfiddle.net/ChasonZhang/2Ln88n5q/

Demo2: 浮动元素
https://jsfiddle.net/ChasonZhang/9Lgugpxu/2/
当 div1 和 div2 都 float 以后，相当于两个 div 虽然脱离了文档流，但现在又处于同一层级，因此又会继续按照从左到右、从上到下的排列顺序进行排列。

1. 提升元素层级（半层）；

http://jsfiddle.net/ChasonZhang/9Lgugpxu/3/