关于li浮动的有关问题！求解

关于li浮动的问题！求解
先上图，
关于li浮动的有关问题！求解

给li加入图片，然后设置第一个浮动，效果如上，，，可是，，关于li浮动的有关问题！求解

给li加上宽高之后就变成上面那样了，这是为什么，求解？

------解决方案--------------------

引用:

Quote: 引用:

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下符合一定条件时，会产生莫名的空白间隙，没法解决，只能统一设置浮动

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

关于li浮动的有关问题！求解

相关推荐