一种是左浮动：{float:left}
Float常跟属性值left、right、none
Float:none
不使用浮动
Float:left
靠左浮动
Float:right
靠右浮动
float语法：
float
:
none
|
left
|right
参数值：
none
:
对象不浮动
left
:
对象浮在左边
right
:
对象浮在右边
<div
class="divcss5">
<div
class="divcss5_left">布局靠左浮动</div>
<div
class="divcss5_right">布局靠右浮动</div>
<div
class="clear"></div><!--
html注释：清除float产生浮动
-->
</div>
二种内联样式：{display:inline}。
例子：
<html>
<head>
<style
type="text/css">
p
{display:
inline}
div
{display:
none}
</style>
</head>
<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>
<p>而
div
元素不会显示出来！</p>
<div>div
元素的内容不会显示出来！</div>
</body>
</html>
原因是display:inline-block属性产生的间隙。display:inline-block是让元素在一行显示，但是这些元素在html里面是上下行排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。
方案一：给元素设置float:left,缺点高度塌陷，要清除浮动。（推荐）
li{display:inline-blockpadding:5pxbackground-color:#ff6float:left}
.clr:after{clear:bothdisplay:blockoverflow:hiddenheight:0content:"."}
.clr{zoom:1}
<ul class="clr">
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">Javascript</a></li>
<li><a href="">XML</a></li>
</ul>
方案二：设置子元素的margin-left为负值，但是元素之间的间隙大小是根据上下文的字体大小确定的，而每个浏览器的换行空隙大小不同，如果font-szie：16px,chrome空隙为8px,火狐空隙为4px.所以这个方法不通用。
方案三：设置父元素 display:tableword-spacing:-1em目前这个方法可以完美解决，且兼容其他浏览器。
