无浮动
<ul style="width: 440px;"> <li id="myli" style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;"> <img src="http://image.bubuko.com/info/201511/20180110172744092685.png"/> </li> </ul>
其中图片高度180px，此时li的高度alert为183。
接下来，在li中加上float属性：
<ul style="width: 440px;"> <li id="myli" style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;float:left"> <img src="http://image.bubuko.com/info/201511/20180110172744092685.png"/> </li> </ul>
此时li的高度alert为180。
接下来，在img中加上float属性：
<ul style="width: 440px;"> <li id="myli" style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;"> <img src="http://image.bubuko.com/info/201511/20180110172744092685.png" style="float:left"/> </li> </ul>
此时li的高度alert为0
------------------------float:left与dispaly:inline-block--------------------------------
<ul style="width: 440px;"> <li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;float:left"> <img src="http://image.bubuko.com/info/201511/20180110172744092685.png"/> </li> <li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;"> <img src="http://image.bubuko.com/info/201511/20180110172744092685.png"/> </li> </ul>
<ul style="width: 440px;"> <li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;display:inline-block"> <img src="http://image.bubuko.com/info/201511/20180110172744092685.png"/> </li> <li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;"> <img src="http://image.bubuko.com/info/201511/20180110172744092685.png"/> </li> </ul>
原文：http://www.cnblogs.com/yumeixin/p/4997602.html