使用float可以将元素从正常文档流中取出，其他inline元素可以将它们 Package 起来;它不会使它们表现得像inline-block元素。
如果你想用其他方法来达到同样的效果，请看下面的例子。

• • 示例1：**

下面是一个示例，在父元素上使用display: flex使子元素位于同一行。

body {
  display: flex;
}

#block1 {
  width: 20%;
  background-color: red;
  height: 100px;
}

#block2 {
  width: 70%;
  background-color: yellow;
  height: 100px;
}

<div id="block1"></div>
<div id="block2"></div>

• • 示例2：**

下面是一个例子，在两个元素上使用display: inline-block，使它们保持在同一行上，并且在父元素上使用font-size: 0，以确保它们之间的间隔消失。
一个二个一个一个

• • 示例3：**

下面是一个示例，在两个元素上使用display: table-cell，使它们位于同一行，而在父元素上使用display: table。

body {
  width: 90%;
  display: table;
}

#block1 {
  width: 22.2222222%;     /* 20% of 90% */
  display: table-cell;
  background-color: red;
  height: 100px;
}

#block2 {
  width: 77.7777778%;     /* 70% of 90% */
  display: table-cell;
  background-color: yellow;
  height: 100px;
}

<div id="block1"></div>
<div id="block2"></div>

你说float的行为 * 像 * inline-block是正确的，但实际上它只是看起来像是以同样的方式行为，为了显示不同之处......让我们假设你在float:left下面有一些文本：那么div将出现在左侧，剩余的可用水平空间将被文本填充。
带浮子：

.floatie {
    float:left;
    width:170px;
    height:170px; 
    background:blue;
}

<p>
Lorem ipsum dolor sit amet, <div class="floatie"></div>consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

但是如果你display:inline-block你会得到不同的结果：
一个二个一个一个

在div的css中添加属性left并没有使它们成为inline-block，而是使它们在DOM中浮动。

浮动的元素将从文档的正常流中删除（但不完全像绝对定位的元素）。
这就是为什么下一个元素移动到顶行并位于浮动元素旁边的原因。
如果希望下一个元素保留在最后一行，则需要使用clear属性。

#block1 {
  display: block;
  width: 20%;
  float: left;
  background-color: red;
  height: 100px;
}

#block2 {
  clear: both; /* NEW */
  display: block;
  width: 70%;
  float: left;
  background-color: yellow;
  height: 100px;
}

<div id="block1"></div>
<div id="block2"></div>