对li标签深究

为什么会实现那样的效果？

1.首先如果不对li设置css，他的正常情况是这样

2.设置list-style：none之后的li，是行级块元素（直接证据就是他可以设置宽高，而行级元素设置宽高没有效果且margin只能设置左右，不能设置上下），他没有高度，为0，宽度是父元素的宽度。

3.如果对li设置float：left浮动，li就有了就没有了宽度。
4.如果这时候li后面有文字，那么文字会撑开li。
如果li设置了宽度，这时候如果li后面是中文，则会向下扩展，如果是英文，会向后扩展

注意，这时候会左右排列的原因是因为他们全部设置了float：left。
这里li比行级块元素特殊的地方是：即使li设置的宽度很小，但是它仍会占用两行，只有使用float的时候，他才会并列成一排。

ul是块级元素，里面的li可以看成是一个个的小方块，而ul就是包含所以li小方块的大箱子。如果li中设置了float浮动，他会脱离文档流（后面的元素比如div不会贴着他写），但是顺序仍是源文档中的顺序。