浮动：
使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来。
inline-block:
inline-block是指行内块元素，它具有行内元素和块元素两者的特点，可以实现对元素的有序排序。
两者的区别
两者主要区别在于当标签的【高度不一致】时，体现出的差异
如果高度不一致的情况下，想让他们按顺序排列就可以选择inline-block
1）浮动时代码演示
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>ul{width: 300px;font-size: 0;}li{list-style: none;width: 100px;height: 150px;background: green;font-size: 40px;text-align: center;line-height: 150px;color: #fff;float: left;/*float: right;*//*display: inline-block;*/}</style></head><body><!--如果高度不一至的情况下，想让他们按顺序排列就可以选择inline-block--><ul><li>1</li><li style="height: 200px;">2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></body></html>
效果图：
2）使用inline-block时代码演示
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>ul{width: 300px;font-size: 0;}li{list-style: none;width: 100px;height: 150px;background: green;font-size: 40px;text-align: center;line-height: 150px;color: #fff;/*float: left;*//*float: right;*/display: inline-block;}</style></head><body><!--如果高度不一至的情况下，想让他们按顺序排列就可以选择inline-block--><ul><li>1</li><li style="height: 200px;">2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></body></html>
效果图：
总结：
在浮动时，若第一个元素的高度大于第二个元素的高度，第三个元素浮动时，会与第二元素并排在一列中，这样不能出现有序排列了。在inline-block时，就算第一个元素的高度大于第二个元素的高度，第三个元素也不会与第二个元素排在一列。【这里第一二三个元素，不是指第一二三个元素，只是为了说明三个元素的关系】
如果觉得《一天搞定CSS： 浮动（float）与inline-block的区别--11》对你有帮助，请点赞、收藏，并留下你的观点哦！
