CSS float与clear & 替换元素与非替换元素
css3盒模型（box）中的一个概念，在css这种，每个元素生成了包含内容的框，有内联元素和块级元素之分。也可以区分为替换元素与非替换元素。
替换元素：浏览器根据标签的元素与属性来判断显示具体的内容。如 input标签，根据type显示内容。img标签，根据src显示内容。textarea、select、object都是替换元素。
非替换元素：内容直接告诉浏览器，浏览器将其显示出来。内容为标签包裹的内容。
块级元素与内联元素，在设置float之后，元素会变成块级元素。
float是令本身元素脱离网页布局流，但是之前布局好的不会改变，而脱离流之后float元素的位置也是从当前位置开始的。如果是同一个位置的多个float元素，不管是left还是right，都会在同一行开始排列，直到下一个位置不够放入下一个元素时，才会换到下一行。
clear则是用来规定左边还是右边不允许出现float元素的，任何元素都可以设置clear，用来规定自己的左边或者右边或者两边都没有浮动元素。
注意，clear属性的意思是，禁止自己左边或者右边出现浮动元素，但是这并不会影响其他元素的布局。比如说，一个元素禁止自己右边有浮动元素，而他后面紧跟一个float:left的元素，这样该元素照样会float到自己右边，因为他的clear属性，并不会影响其他的布局，只会影响自己的布局。比如说上面那种情况，可以设置后面元素的clear为left，这样后面的元素左边禁止出现float元素，因为左边是一个float，所以他没办法，只能显示到下一行了。（clear:right是用在float:right的几个元素中的第二个的。）
由此可知，多个float元素中，设置clear会生效的只有第一个元素之后的元素。
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
说了这么多，float的常用法还是用来一行排布多个div，这样就有问题了，怎么令float元素后的非float元素排在float元素之后呢，这就需要使用清除了，在最后一个float元素后放任意一个标签，设置该标签的clear为both。由于clear禁止自己左右有float元素，于是没办法，自己只有排列到下一行了。这就是我们经常看到的网页代码中的::after伪类的作用了。
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
float浮动的元素，脱离标准流，但是又和标准流中的其他元素一样，可以设置各种属性，其实就是开辟了在标准布局之上的一个布局，用于放这些float元素。
无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
详细内容参考：http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html
float属性没有继承性，且左浮动时，是从最右边开始向左边浮动，若空间不够，则会上升跑到下一行，直到有足够的空间可以让他占用为止。
浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
当用一个非float元素来清除float时，若该元素为clear:both时，有两种情况：
1、非float元素为块级元素，则由于clear的作用，本来应在float元素之下的块级元素，会被布局到float元素的下一行（虽然和clear定义有些冲突，但是真实效果就是这样，可以按本来该块级元素是从最右边开始布局，碰到float元素时，跳到了下一行）。
2、内联元素时，由于float的作用，在内联元素后的float元素会跑到内敛元素之前，且内联元素的clear属性无效，他们还是会处在同一行。
且float元素只是不占用div的布局位置，如果和span在同一个div中，则float元素和span是会在同一行排布开，而span并不会跑到float元素下面。
- 最直接的clear属性，该属性表示的是框的 哪边不应该挨着浮动框。这个属性是对元素本身而言，通过自动为该元素增加上外边距实现的（css1和css2），或者在上外边距之上增加清除空间，而外边 距本身不改变的方式（css2.1）。clear的缺陷是可能要添加额外无意义的标签。
- 通过父类的浮动也可以清理子类浮动，将空间撑开。这有点像负负得正。但原理应该是浮动的元素也是按照文档流的方式布局，只不过它们是另外一个独立的文档流，不同于普通文档流，暂时叫它浮动文档流？
- hasLayout和BFC都可以清理浮动。overflow：hidden；zoom:1；）））
更多内容：float布局：
http://www.w3school.com.cn/css/css_positioning_floating.asp
css定位
http://www.w3school.com.cn/css/css_positioning.asp
外边距合并
http://www.w3school.com.cn/css/css_margin_collapsing.asp
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;
display: inline-block; 有些时候可以替代float实现相同的效果.
position: absolute|relative; 要配合top,left等定位;
position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-index。PS的图层效果就是position: absolute。
float也会导致元素脱离文档流，但还在文档或容器中占据位置，把文档流和其它float元素向左或向右挤，并可能导致换行。图片的文字环绕布局效果就是float。
display的inline-block不脱离文档流，将block元素当作大型字符嵌入文档流内，类似于img或者input默认效果。
===================================================
补充，其实这个答案完全没有回答问题，因为提问者说：
不用解释每个的概念，仅谈应用上的区别。
应用范围是？或者说在什么情况下优先使用哪个？
尽管都能实现某一效果
但是我想回答的是，这三种方式产生的排版效果是截然不同的，只有充分理解了他们的排版效果，才能作出最好的决定。
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;
display: inline-block; 有些时候可以替代float实现相同的效果.
position: absolute|relative; 要配合top,left等定位;
position
- position属性取值：static(默认)、relative、absolute、fixed、inherit。
- postision：static；始终处于文档流给予的位置。看起来好像没有用，但它可以快速取消定位，让top，right，bottom，left的值失效。在切换的时候可以尝试这个方法。
- 除了static值，在其他三个值的设置下，z-index才会起作用。（确切地说z-index只在定位元素上有效）
- position：relative和 absolute都可以用于定位，区别在于前者的div还属于正常的文档流，后者已经是脱离了正常文档流，不占据空间位置，不会将父类撑开。定位原点 relative是相对于它在正常流中的默认位置偏移，它原本占据的空间任然保留；absolute相对于第一个position属性值不为static 的父类。所以设置了position：absolute，其父类的该属性值要注意，而且overflow：hidden也不能乱设置，因为不属于正常文档 流，不会占据父类的高度，也就不会有滚动条。
- fixed旧版本IE不支持，却是很有用，定位原点相对于浏览器窗口，而且不能变。常用于header，footer，或者一些固定的悬浮div，随滚动条滚动又稳定又流畅，比JS好多了。fixed可以有很多创造性的布局和作用，兼容性是问题。
- position：inherit。规定从父类继承position属性的值，所以这个属性也是有继承性的。但是任何版本的IE都不支持该属性值。
float
- float属性取值：none(默认)、left、right、inherit。
- float：left(或right)，向左（或右）浮动，直到它的边缘碰到包含框或另一个浮动框为止。且脱离普通的文档流，会被正常文档流内的块框忽略。不占据空间，无法将父类元素撑开。
- 任何元素都可以浮动，浮动元素会生成一个块级框，不论它本身是何种元素。因此，没有必要为浮动元素设置display：block。
- 如果浮动非替换元素，则要指定一个明确的width，否则它们会尽可能的窄。（什么叫替换元素？根据元素本身的特点定义的， (X)HTML中的img、input、textarea、select、object都是替换元素，这些元素都没有实际的内容。 (X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。）
（（（不想脱离出去讲清理浮动- -||，还是少说些。。。
- 最直接的clear属性，该属性表示的是框的 哪边不应该挨着浮动框。这个属性是对元素本身而言，通过自动为该元素增加上外边距实现的（css1和css2），或者在上外边距之上增加清除空间，而外边 距本身不改变的方式（css2.1）。clear的缺陷是可能要添加额外无意义的标签。
- 通过父类的浮动也可以清理子类浮动，将空间撑开。这有点像负负得正。但原理应该是浮动的元素也是按照文档流的方式布局，只不过它们是另外一个独立的文档流，不同于普通文档流，暂时叫它浮动文档流？
- hasLayout和BFC都可以清理浮动。overflow：hidden；zoom:1；）））
display
- display属性取值：none、inline、inline-block、block、table相关属性值、inherit。
- display属性规定元素应该生成的框的类型。文档内任何元素都是框，块框或行内框。
- display：none和visiability：hidden都可以隐藏div，区别有点像absolute和relative，前者不占据文档的空间，后者还是占据文档的位置。
- display：inline和block，又叫行内元素和块级元素。表现出来的区别就是block独占一行，在浏览器中通常垂直布局，可以用margin来控制块级元素之间的间距（存在margin合并的问题，只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。）；而inline以水平方式布局，垂直方向的margin和padding都是无效的，大小跟内容一样，且无法设置宽高。inline就像塑料袋，内容怎么样，就长得怎么样；block就像盒子，有固定的宽和高。
- inline-block就介于两者之间。
- table相关的属性值可以用来垂直居中，效果一般。
定位机制
- 上面三个属性都属于CSS定位属性。CSS三种基本的定位机制：普通流、浮动、绝对定位。
随便扯一些居中布局：
- 宽高固定可以利用负 margin。.center{top：50%;margin-top:-height/2;left:50%;margin-left:-width /2;}话说现在觉得这个方法略微扯淡，要是宽高都知道，直接计算出x的值，设置个margin：x;就好了，多这么多代码，没劲。所以别尽看网上的代 码，能简则简，本来就没有模式。
- 宽高不固定的元素。.center{display：inline-block},父类设置{text-align:center}
- 垂直居中table-cell不说了
- {line-height：height;vertical-align:middle;}
- {position:absolute;top:0;bottom:0;margin:auto}别忘记给父类定位{position:relative;}
p.s.写技术文章我很不擅长，只会贴代码，好像还很乱。我解决问题的时候都要各种尝试，各种搜索，过程很繁杂。折腾完已经不想总结了。这是一种感觉⊙﹏⊙b
positon 与 display 的相互关系
元素分为内联元素和区块元素两类（当然也有其它的），在内联元素中有个非常重要的常识，即内两元素是不可以设置区块元素所具有的样式，例如:width | height。
relative : 原来是什么类型的依旧是什么类型。
absolute | fixed ： 元素就被重置为了区块元素，例如：打算为span元素指定大小，并绝对定位
<span style=”position:absolute; width:100px; height:50px;”>span</span>这是完全正确的，
<span style=”position:absolute; display:block; width:100px; height:100px;”>span</span>，这里的display:block就是多余的了。
position 与 float 的相互关系
一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流(这是自己起的名字，呵呵)”。
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
position: relative和position: absolute 都可以改变元素在文档中的位置，设置position: relative 或 position: absolute都可以让元素激活left、top、right、bottom 和 z-index 属性。
网页虽然看起来是平面的二维结构，但它其实是有z轴的，z轴的大小由z-index 控制，默认情况下，所有元素都是在z-index: 0 这一层的，这就是文档流。设置position: relative 或 position: absolute会让元素浮起来（就像游戏中的概念-多层图层），也就是z-index大于0，它会改变正常情况下的文档流。不同的是position: relative 会保留自己在z-index:0 层的位置，但是它的实际位置可能因为设置了left、top、right、bottom值而偏离原来在文档流中的位 置，但对其他仍然在z-index:0层的元素位置不会造成影响。而position: absolute会完全脱离文档流，不再在z-index:0层保留占位符，其left、top、right、bottom 值是相对于自己最近的一个位置–设置了position: relative 或 position: absolute的祖先元素的，如果祖先元素都没有设置position: relative 或 position: absolute，那么就相对于body元素。
除了position: relative 和 position: absolute，float也能改变文档流，不同的是，float属性不会让元素“上浮”到另一个z-index层，它仍然让元素在z-index:0 层排列，float不像position: relative 和 position: absolute那样，它不能通过left、top、right、bottom属性精确地控制元素的坐标，它只能通过float:left 和 float:right 来控制元素在同层里“左浮”和“右浮”。float会改变正常的文档流排列，影响到周围元素。
另一个有趣的现象是position: absolute 和 float会隐式地改变display类型，不论之前什么类型的元素（display:none除外），只要设置了position: absolute 或 float中任意一个，都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。就算我们显式地设置 display:inline或者display:block，也仍然无效（float在IE6 下的双倍边距bug就是利用添加display:inline来解决的）。值得注意的是，position: relative却不改变display的类型。
1、position 对 float 的影响：float 可以说是定义同辈元素之间的位置关系，浮动元素相对于父元素，其位置的定义是确定不变的的：基于position:static/relative时的位置，向左侧或右侧靠近(一个可能的错误的认识是，浮动元素会向左上角或右上角浮动)，
因此，position:static 和 position:relative 与 float 的效果可以叠加，
但 position:absolute、position:fixed 这两个定位属性依赖于自身元素之外的参照，将使 float 的效果无法表现出来。
2、浮动元素对文本的影响：浮动概念的基础是图文混排，因此同辈元素的在排版时如果浮动元素与非浮动元素之间发生覆盖，无论是谁覆盖谁，非浮动的元素内的文字将会被挤走，如下例：
.elm{ width:100px; height:50px;background:green; border:1px solid red; }
.lf{float:left; }
float
no float，被挤走
3、浮动元素对父元素的影响：浮动元素的父元素丢失 block 高度，即使定义了高度，也无法影响其同辈浮动元素及其浮动的子元素的布局，默认情况下，如果父元素没有定义高度，则父元素的内容会撑开父元素，达到自适应 block 高度的效果，浮动元素无法撑开其父元素的block 高度。
4、浮动元素对自身的影响：浮动元素将按 inline-block 形式布局（haslayout），即使将他设置为 display:inline;，因此，默认宽度自动扩展为100%的元素浮动之后，宽度由元素内容撑大，原来没有高宽属性的元素也变得可以定义高宽；如果出现重叠，浮动元素将叠加在非浮动的同辈元素之上（像是具有更大的z-index值）；
2、对于浮动，这个属性一般不是用来做布局的（偏向于排版），但是CSS2.1好像也就这个属性 能够满足一些特定需求，所有才有了浮动布局。浮动相对绝对定位好处是，它默认可以影响行内布局，通过 clear 清除浮动也可以影响 块布局，可以与普通流建立良好的交互。 而且浮动本身是脱离普通流的，在元素的水平定位上相比于 inline-block 更加灵活多变， 而 inline-block 的水平定位则更加有序。
3、inline-block，这个属性也不是用来布局的（偏向于排版），但是在 CSS3 普及之前，它的用处也很大。该元素的盒子在行框中进行格式化，其顺序与源HTML中的顺序一一对应。 同时该元素不脱离普通流，这比浮动来说有更大的优势，它可以跟普通流自然交互，而不必要借助去其他属性。而且相比浮动，相邻元素间的垂直对齐方 式，inline-block 比 float 更加灵活， float 格式化时有一条规则，就是越高越好（因此常常表现为顶端对齐），而 inline-block 在行内格式化，拥有更灵活的垂直对齐方式。应用：
如果使用了浮动，清除浮动就会成为你的副作用，而且如果你没有良好的HTML/CSS 结构的话，清除浮动是一个很复杂的事情。
inline-block 虽然避免了清除浮动的事情，但是会有另一个副作用，即空白符问题。这个问题的解决方案也令人十分蛋疼，因为毕竟 inline-block 不是布局属性，它仅仅是 行内级块容器盒子。 同时，作为IFC环境中的格式化问题，垂直居中、行高等问题也有可能是一个副作用。
其实在 CSS2.1中，利用表格 table 布局也是非常强大的方法。表格布局在等高，同列等宽对齐，垂直居中对齐上面的优势是其他方法很难媲美的。甚至于在自适应场景中，表格布局的灵活性也非常出众。
display: inline-block; 有些时候可以替代float实现相同的效果.
position: absolute|relative; 要配合top,left等定位;举例:
<html>
<body>
<style type=”text/css”>
div {border: 1px solid red; margin: 1px;}
div div {border: 1px solid blue;}
</style>
<div>
<div style=”float: right;”>Float 1</div>
<div style=”float: right;”>Float 2</div>
<div style=”clear: both; border: 0;”></div>
</div>
<div style=”text-align: right;”>
<div style=”display: inline-block;”>Inline Block 1</div>
<div style=”display: inline-block;”>Inline Block 2</div>
</div>
<div style=”position: relative;”>
<div style=”position: absolute; right: 0px;”>Position 1</div>
<div style=”position: absolute; right: 50px;”>Position 2</div>
</div>
</body>
</html>表现:
上面的是float, 中间的是inline-block, 下面的是position, 可以看出:
1. 当居右(右浮动)时, float是按先后顺序来的, 先写的排子右边; 而inline-block则保持左右顺序不变.
2. 在部分浏览器中(以上是在的firefox中), 空行或空格会影响到inline-block, 却不会影响到float的block.
3. position只能配合left,right来定位, 如果去掉则重叠在一起; 不能借助clear等自动扩展容器.
4. 他们都有共同点, 如果包裹的是行级元素, 则宽度可以按内容宽度自适应.
使用场景:
照片墙, 选项卡, 导航条等可以使用inline-block或float, 推荐inline-block, 但需要注意浏览器兼容, 用float记得习惯性的使用clear.
Tip等提示, 悬浮窗, 遮罩等, 建议使用position.
