display:inline与float:left的区别

实现效果似乎相同，都是显示在一行。区别在于使用了display:inline，则该元素变为了内联元素，同时宽高也就无效了；而float则使元素变为块元素，且宽高属性是有效的。

<style type="text/css">.d{width:100px; height:50px; background:#009966; float:left;}</style><div class="d">DIV1</div><div class="d" style="background:#999999;">IDV2</div>

效果图：float:left

将float:left改为display:inline后

另：使用display:inline这一特性，可实现当两DIV被放在另一DIV中，两DIV不回行显示

<style type="text/css"> .c{width:80px; height:50px; background:#CCFFCC; white-space:nowrap} /* 容器需要设定 white-space:nowrap 样式*/ .d{width:50px; height:50px; background:#009966; display:inline;} /*宽高无意义，为突出对比而存在*/</style><div class="c"> <div class="d">DddIV1</div> <div class="d" style="background:#999999;">IDV2</div></div>

如果内部两DIV样式为float的话就会回行