说明：之前有一点搞错了，就是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>。
举个例子：
1 <html> 2 3 <head> 4 <meta charset="utf-8"> 5 <title>Demo for "block"/"inline"/"inline-block"</title> 6 7 <style> 8 /*为div设置尺寸*/ 9 div, span { 10 width: 200px; 11 height: 200px; 12 } 13 /*为div设置颜色：红黄绿*/ 14 div#a { 15 background: red; 16 } 17 div#b { 18 background: orange; 19 } 20 div#c { 21 background: green; 22 } 23 /*为span设置颜色：灰*/ 24 span { 25 background: grey; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div id="a"> 32 我是div#a 33 </div> 34 <div id="b"> 35 我是div#b 36 </div> 37 <div id="c"> 38 我是div#c 39 </div> 40 41 <span>我是SPAN 1，按说我的尺寸就是内容的尺寸</span> 42 <span>我是SPAN 2，按说我的尺寸就是内容的尺寸</span> 43 44 </body> 45 46 </html>
显示如下：
能够明显看到：块级元素的div是有宽度和高度，且自带换行；而内联元素的span的宽度和高度取决于其内容的宽度和高度，且没有换行。
至于 内联-块级元素 的img 就不示意了。
CSS 可以将块级元素 和 内联元素 互换！！！ -- 具体是通过display 属性来实现的。
先看看如何将 块级元素 变为 内联元素：
div#a { /*其它设置省略*/ display: inline; }
结果如下：
可以看到 div#a 的宽度和高度已经不是200px啦，但是仍然具备换行 -- 这个稍后说。
再来看看 span 如何变成 块级元素：
span { display: block; width: 200px; height: 200px; }
结果如下：
可以看到 span已经变成了块级元素，能够设置宽度和高度，还自带换行了。
现在，再来说说 div 变成内联元素仍然换行的问题 -- 只说解决方案，因为我也不知道内部原理是怎么回事。
解决方案就是： float 。
我的理解，这货的作用就是：
如果设置了
float: left，就是跑到下一个元素的左边，或者说把下一个元素拽到自己的右边；【错误的】如果是
float: right， 就是跑到下一个元素的右边，而且贴近父元素的边界。【错误的】就是漂浮起来，位居其它元素之上，不与它们争夺地盘！！！ 但是，因为我们是俯视它们，所以漂浮起来的元素会遮挡住它下面的元素！！！
-- 变成浮动的，飘来飘去，虽然不再霸道的占据整行，但仍然有自己的尺寸。【错误的】
这里只示意一下（div恢复block，span恢复inline）：
div#b { background: green; float: left; /*我的右边没有换行*/ }
结果如下（div#b 浮空了，div#c就跑它下面去了，所以看不见啦 -- 但文字跑不过去，就与SPAN-1的重合了）：
我们可以改变一下div#b的宽度和高度，将其设为100px，然后就能看到没有被遮住的div#c啦：
其实float 有个特性：如果前一个元素也是float的，那二者会水平并列（除非一行装不下，那会换行）；如果前一个元素不是float的，那float的会位于前一个元素的下面。
那么，当多个div都浮动的时候，会发生什么？--彼此连接的同时覆盖后面的非float元素！！！
但这未必是我们想要的。
拿上一个例子来说，如果我不想让div#b覆盖div#c，应该怎么做？
很简单， div#c 的clear设为right即可（只是用来演示，如果真要设置的话，b和c都设为float即可并列），效果如下：
这里有个关键：clear是作用于自身，就是说是决定自己某侧浮动与否。
这有点像一些人的性格：不管外界如何，我坚持我的原则；如果我不认同你，我就离开，哪怕你很牛逼（float）。