说明：之前有一点搞错了，就是float其实是浮动起来，其它元素会位于它的底层。
最近在系统地学习HTML5，感觉补上了好多缺失的知识。
例如：
锚点定位其实可以通过
id来实现；CSS 使用
!important来设置强优先级；子元素只能继承父元素的字体、颜色等外观，但默认不能继承布局样式。如果必须要继承，需要让具体的属性设为
inherit，如：border: inherit;
text-transform有uppercase、lowercase、capitalize等选项。
font-variant有small-caps这个选项，还可以normal来复原。
display、float！！！ -- 这是本文的主题。
首先，HTML 中有两类特别的元素：块级元素(block) 、内联元素(inline)。其实还有一种 内联-块级元素(inline-block)。
区别在于：
块级元素(block) 可以有效地设置 width 和height，且自带换行。 如<div>。
内联元素(inline) 不能有效地设置 width 和height，且没有换行。 如<span>。
而 内联-块级元素(inline-block)。则可以有效地设置 width和height， 但没有换行。 如<img>。
举个例子：
<html> <head>
<meta charset="utf-8">
<title>Demo for "block"/"inline"/"inline-block"</title> <style>
/*为div设置尺寸*/
div, span {
width: 200px;
height: 200px;
}
/*为div设置颜色：红黄绿*/
div#a {
background: red;
}
div#b {
background: orange;
}
div#c {
background: green;
}
/*为span设置颜色：灰*/
span {
background: grey;
}
</style>
</head> <body>
<div id="a">
我是div#a
</div>
<div id="b">
我是div#b
</div>
<div id="c">
我是div#c
</div> <span>我是SPAN 1，按说我的尺寸就是内容的尺寸</span>
<span>我是SPAN 2，按说我的尺寸就是内容的尺寸</span> </body> </html>
显示如下：
我是SPAN 1，按说我的尺寸就是内容的尺寸 我是SPAN 2，按说我的尺寸就是内容的尺寸
能够明显看到：块级元素的div是有宽度和高度，且自带换行；而内联元素的span的宽度和高度取决于其内容的宽度和高度，且没有换行。
至于 内联-块级元素 的img 就不示意了。
CSS 可以将块级元素 和 内联元素 互换！！！ -- 具体是通过display 属性来实现的。
先看看如何将 块级元素 变为 内联元素：
div#a {
/*其它设置省略*/
display: inline;
}
结果如下：
我是SPAN 1，按说我的尺寸就是内容的尺寸 我是SPAN 2，按说我的尺寸就是内容的尺寸
可以看到 div#a 的宽度和高度已经不是200px啦，但是仍然具备换行 -- 这个稍后说。
再来看看 span 如何变成 块级元素：
span {
display: block;
width: 200px;
height: 200px;
}
结果如下：
我是SPAN 1，按说我的尺寸就是内容的尺寸 我是SPAN 2，按说我的尺寸就是内容的尺寸
可以看到 span已经变成了块级元素，能够设置宽度和高度，还自带换行了。
现在，再来说说 div 变成内联元素仍然换行的问题 -- 只说解决方案，因为我也不知道内部原理是怎么回事。
解决方案就是： float 。
我的理解，这货的作用就是：
如果设置了
float: left，就是跑到下一个元素的左边，或者说把下一个元素拽到自己的右边；【错误的】如果是
float: right， 就是跑到下一个元素的右边，而且贴近父元素的边界。【错误的】就是漂浮起来，位居其它元素之上，不与它们争夺地盘！！！ 但是，因为我们是俯视它们，所以漂浮起来的元素会遮挡住它下面的元素！！！
-- 变成浮动的，飘来飘去，虽然不再霸道的占据整行，但仍然有自己的尺寸。【错误的】
这里只示意一下（div恢复block，span恢复inline）：
div#b {
background: green;
float: left; /*我的右边没有换行*/
}
结果如下（div#b 浮空了，div#c就跑它下面去了，所以看不见啦 -- 但文字跑不过去，就与SPAN-1的重合了）：
我是SPAN 1，按说我的尺寸就是内容的尺寸 我是SPAN 2，按说我的尺寸就是内容的尺寸
我们可以改变一下div#b的宽度和高度，将其设为100px，然后就能看到没有被遮住的div#c啦：
我是SPAN 1，按说我的尺寸就是内容的尺寸 我是SPAN 2，按说我的尺寸就是内容的尺寸
其实float 有个特性：如果前一个元素也是float的，那二者会水平并列（除非一行装不下，那会换行）；如果前一个元素不是float的，那float的会位于前一个元素的下面。
那么，当多个div都浮动的时候，会发生什么？--彼此连接的同时覆盖后面的非float元素！！！
但这未必是我们想要的。
拿上一个例子来说，如果我不想让div#b覆盖div#c，应该怎么做？
很简单， div#c 的clear设为right即可（只是用来演示，如果真要设置的话，b和c都设为float即可并列），效果如下：
我是SPAN 1，按说我的尺寸就是内容的尺寸 我是SPAN 2，按说我的尺寸就是内容的尺寸
这里有个关键：clear是作用于自身，就是说是决定自己某侧浮动与否。
这有点像一些人的性格：不管外界如何，我坚持我的原则；如果我不认同你，我就离开，哪怕你很牛逼（float）。