web前端中display:inline-block 和float:left 的区别

一般我们在写css样式时，经常会用到display:inline-block 和float:left，那这两个样式都可以让元素横向排列，那什么时候用float:left，什么时候用display:inline-block呢？

float: 浮动，闻其名而知其意：使元素浮起来，脱离文档流，从而达到多个元素排列在一行的目的。

inline-block:内联块，即既有内嵌的部分特征也具有块级元素的特征。

使用浮动：1、让元素环绕某一个元素，对一个元素跟围绕他的一些元素进行更多控制

2、不想处理inline-block带来的空白问题

元素浮动后，它会变为 inline-block。其宽度不是100%

#columnContent .item_ul>li

{

float:left;

width:203px;

margin:3px 5px;

vertical-align:top;

text-align:left;

}

效果：菜单居中和自适应

问题：整体样式没问题，但是展开li标签内容时，其他li标签环绕，

又因为存在自适应，当页面缩小时，每行的li标签个数会减少，并且居中

#columnContent .item_ul>li

{

display:inline-block;

width:203px;

margin:3px 5px;

vertical-align:top;

text-align:left;

*display:inline;

zoom:1; }

只需替换一个浮动样式就都解决了。

转载来源：https://www.yunkexiu.com/ykx_newsdetail/364