为什么添加属性向左浮动会使 div 表现得像一个内联块

Question

我有两个 div 有两个主要属性显示块和宽度

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

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

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

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

当我添加 float 属性时，这两个 div 的行为就像一个内联块：

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

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

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

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

为什么添加属性 float:left 会使 div 表现得像内联块

Answer 1

使用 float 以其他 inline 元素可以包围它们的方式将元素从正常文档流中取出；它不会使它们表现得像 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>

例二：

这是一个在两个元素上使用 display: inline-block 使它们保持在同一行上的示例。此外，font-size: 0 用于父项以确保间隙 in-between 消失。

body {
  font-size: 0;
}

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

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

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

示例 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>

Answer 2

将属性 left 添加到 div 的 css 并没有使它们成为 inline-block。它使它们浮动在 DOM.

Answer 3

浮动元素从文档的正常流中移除（但不完全像 absolutely-positioned 元素）。

这就是下一个元素移动到顶行并位于浮动元素旁边的原因。

如果你想让下一个元素停留在底行，你需要使用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>

Answer 4

你说这个特定情况 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 你会得到不同的结果：

.floatie {
    display:inline-block;
    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>

为什么添加属性向左浮动会使 div 表现得像一个内联块

Why adding the property float left makes the div behave like an inline-block

html

css

css-float

为什么添加 属性 向左浮动会使 div 表现得像一个内联块

Why adding the property float left makes the div behave like an inline-block

html

css

css-float

为什么添加属性向左浮动会使 div 表现得像一个内联块