inline-block&浮动.html

<style type="text/css">
    .float-left{float:left}
    .float-right{float:right}
    .align-right{text-align:right}
    .clear{clear:both;}
    .inline-block {display:inline-block}
    body>div {padding: 10px 0}
</style>

<div><div class="float-left">float-left元素</div> <div class="float-left">float-left元素</div> <div>block元素</div></div>
<div><div class="float-left">float-left元素</div> <div class="float-left">float-left元素</div> <div class="clear">clear元素</div></div>
<div><div class="inline-block">inline-block元素</div> <div class="inline-block">inline-block元素</div> <div>block元素</div></div>
<hr/>
<div><div class="float-left">float-left元素</div> <div class="float-right">float-right元素</div> <div>block元素</div></div>
<div><div class="float-left">float-left元素</div> <div class="float-right">float-right元素</div> <div class="clear">clear元素</div></div>
<div><div class="float-left">float-left元素</div> <div class="align-right">align-right元素</div> <div>block元素</div></div>
<div><div class="inline-block">inline-block元素</div> <div class="float-right">float-right元素</div> <div>block元素</div></div>

<p>

	第一行没有清除浮动，因此block元素直接和float-left元素并排了。<br/>
第二行清除了浮动，不足之处就是这个元素可能没有内容，只是个空元素而已。（虽然也可用CSS的content属性来生成，但毕竟也显得不干净。）<br/>
第三行用了inline-block，直接就很正常地展示出来了。不过每个div之间有个空格，可以利用letter-spacing和font-size来清除。<br/>

第四行同时使用了左右浮动，没有清除浮动，因此block元素直接插到中间去了。<br/>
第五行清除了左右浮动，可以正常显示了。<br/>
第六行用text-align来实现右对齐，由于它没有浮动，并且占据了剩下的空间，因此block元素可以正常显示。<br/>
第七行仍然是inline-block，为了节省时间，使用浮动来右对齐。由于inline-block和非浮动的block元素不能同处一个line box，因此也自动换行了。<br/>

另外，使用inline-block是不需要限制高度的，因为它没有脱离文档流，line box会自动计算行高来包裹inline boxes，不会出现float时元素高度不一致，自动就被高的元素挤开的情况。

</p>