关于li浮动的问题！求解_html/css_WEB-ITnose

先上图，

给li加入图片，然后设置第一个浮动，效果如上，，，可是，，
给li加上宽高之后就变成上面那样了，这是为什么，求解？

回复讨论(解决方案)

如果你想实现两列，那么ul设置两个li的宽，所有的li浮动即可

li是块状标签，本来就是要占用一行的，第一个你用了float:left，它左浮动让出右边的位置，第二个li就占用剩余的空间了，第二个没有浮动，就是占用一行了，所以最后一个就又另起一行了。第二种情况：li没有浮动，每个都是占一行，所以都是要换行的。

float设置后脱离正常流，第二个li元素上移

li设置宽度后，因为#one与后面的li宽度相同，相当于第二个li块级元素中最左边被#one占用，即第一行宽度内容已满，它里面的内容只能换行在第二行开始显示;而未设置宽度时，#one的宽度只是包含a字符的宽度，第二个li宽度默认则有100%UL的宽

float设置后脱离正常流，第二个li元素上移

li设置宽度后，因为#one与后面的li宽度相同，相当于第二个li块级元素中最左边被#one占用，即第一行宽度内容已满，它里面的内容只能换行在第二行开始显示;而未设置宽度时，#one的宽度只是包含a字符的宽度，第二个li宽度默认则有100%UL的宽

第一种我懂，就是还是不太清楚为什么设了宽度之后，它的效果就不同了，（因为#one与后面的li宽度相同，相当于第二个li块级元素中最左边被#one占用）这句话我理解不了，求解答！谢谢

float设置后脱离正常流，第二个li元素上移

li设置宽度后，因为#one与后面的li宽度相同，相当于第二个li块级元素中最左边被#one占用，即第一行宽度内容已满，它里面的内容只能换行在第二行开始显示;而未设置宽度时，#one的宽度只是包含a字符的宽度，第二个li宽度默认则有100%UL的宽

第一种我懂，就是还是不太清楚为什么设了宽度之后，它的效果就不同了，（因为#one与后面的li宽度相同，相当于第二个li块级元素中最左边被#one占用）这句话我理解不了，求解答！谢谢

浏览器渲染时，浮动元素叠加在正常流元素之上，第二个li元素宽度只有120px，高度自适应。而#one宽度也有120px，当它浮动至左端时，第二个li元素内容会靠近#one右端开始定位，空间不够时只能往下。你将第二个li元素宽度设置为大干120px，你也许就明白了

更多的时候，没必要太过纠结为什么会这样，因为这么干本身就是有兼容问题的，再比如 文字环绕图片的效果，不同浏览器下呈现出来的 也是不太一致的，没什么解决方案，只能是在做的时候就避开类似的布局

再比如，两个块级元素想在同排显示，很多人都会 第一个设置浮动，第二个靠挤上来的方案，但是该种做法在IE6/7下 符合一定条件时，会产生莫名的空白间隙，没法解决，只能统一设置浮动

如果你真的想要知道为什么会这样，我想你得从各大浏览器的底层渲染机制去了解，即便你了解了，也会避开类似的布局