这里的li没有添加float属性，可以见到li宽度100%自适应于父ul标签。一切显得那么的和谐！
单个左浮动的li元素
看下面的HTML代码：
复制代码
<ul style=”width:440px;”>
<li style=”border:4px solid #ff6633; background:#ffffc0; float:left;”><img src=”../image/border.png” /></li>
</ul>
结果如下图：
相比上面而言，这里多了个
float:left;，浮动的“包裹性”一目了然：水平方向上，li宽度紧贴内部元素。我在css float浮动属性的深入研究及详解拓展(一)曾说过这么句结论性的话：“撇开浮动的‘破坏性’，浮动就是个带有方位的display:inline-block属性”。这不难理解，您可以讲这里的
float:left;改成
display:inline-block;最后实现的效果基本上就是一样的。display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。所谓对象呈递为内敛对象就是元素呈递为inline box，所以浮动“包裹性”所产生的结果就是使得元素转为了line box模型中的inline box元素。浮动的“包裹性”让元素变成类似于inline box的元素，而浮动的“破坏性”正是破坏inline box元素的，这其中岂不有矛盾。其实非也，对于block水平的这类块状元素需要先让其变成类似效果的内联元素，然后再破坏之，实乃先诱拐再奸杀的生动实例啊！
又是我反复提到的，浮动破坏了inline box，也就是破坏了高度，所以这里含有浮动属性的li元素实际上是没有高度的。所以呢，要是后面还有同样的li标签的话，就会水平对齐排列的。如下：
多个左浮动的li元素
看下面的HTML代码：
复制代码
<ul style=”width:440px;”>
<li style=”border:4px solid #ff6633; background:#ffffc0; float:left;”><img src=”../image/border.png” /></li>
<li style=”border:4px solid #ff6633; background:#ffffc0; float:left;”><img src=”../image/border.png” /></li>
</ul>
结果如下图：
左浮动的li元素和无浮动的li元素
看下面的HTML代码：
复制代码
<ul style=”width:440px;”>
