Question

CSS中float:left与display:inline的区别是什么？

在CSS中float:left与display:inline的区别是什么？
请不要给我复制网上的解释，我已经看到了，但是还是不明白其中的意思。
请用通俗的语言表达，谢谢。
本人菜鸟啊，看不懂其中的“内联”是什么意思。

Answer 1

当然不一样了，

display:inline是把元素放进文档流里随着文档流动，例如删除了前面的元素，后面的元素会自动补上去。文本就是内联元素（display:inline），如果把<div>定义为display:inline,它就会跟随文档流流动，而且不能设置大小:

1234[it is a div]1234

float一般用在<div>（默认display:block）之类的元素上使用，可以设置大小。
float:left就是在文档流左侧浮动，文档流绕其而行,即使在元素前加上其他的内联元素（display:inline），也不会改变位置。

举个例子，在display:inline元素左边放几个字：

┌——————┐12341234
│it is a div │
└——————┘

这都是我自己写的，绝对通俗。

Answer 2

display:inline 就是你说的 “内联”，是指:

同种类型的标签，可以并排显示，不会必然折行。

你可以通过下面的代码，来体验：

<div>a</div>
<div>b</div>

和 “内联” 方式：
<div style="display:inline">a</div>
<div style="display:inline">b</div>

对比两者的显示结果。

Answer 3

FLOAT:LEFT 左浮动需要消除浮动

display:inline 常用于UL中的文字控制。UL中的LI要居中的话 要用到 inline

两者都是有区别的。

ul.left li{ float:left; list-style:none; }
ul.inline li{ display:inline}

Answer 4

Vue实践-CSS样式position/display/float属性对比使用