为什么添加属性 float left 会使 div 表现得像一个内联块答案

【问题标题】：Why adding the property float left makes the div behave like an inline-block为什么添加属性 float left 会使 div 表现得像一个内联块
【发布时间】：2023-03-15 23:02:01
【问题描述】：

我有两个 div，有两个主要属性 display block 和 width

#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>

当我添加浮动属性时，它会使两个 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 表现得像一个内联块

【问题讨论】：

想一想，漂浮实际上是让其他东西漂浮在它周围。它们的行为不像内联块元素。我接受了花车——但我已经好几年没用过了。查看 flex-box / 如果你可以放弃 IE 10
divs默认是块级元素，因此不需要显示：块
好的，我使用的是 inline-flex，但我听说我最喜欢的浏览器直到 v11 才支持它，所以我正在尝试找出其他基本解决方案
@VXp 是的，我知道是对的，我只是想指出让问题更清楚:)

标签： html css css-float

【解决方案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>

示例 2：

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

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>

【讨论】：

谢谢。您是否使用 float 属性使两个 div 以不同的宽度在同一行上？这是一个好习惯吗？
不客气@MehdiSouregi。通常，为了完成您想要的操作，我在所有元素上使用 display: inline-block 或在其父元素上使用 display: flex 以使它们都保持在同一行。
是的，有时 inline-block 不会使 div “对齐”，所以我需要切换到 inline-flex ，并且在 IE11 之前不支持 flex 框
"aligned" 是什么意思？您始终可以使用vertical-align 来确保元素按照您的意愿对齐。
有时一个 div 可以包含比第二个更多的文本，在这种情况下，div 不会像你说的那样与 inline-block 保持在同一行，所以我需要交换到 inline-flex，我试图避免使用 flex 因为直到 IE11 才支持它

【解决方案2】：

你说得对，这种特殊情况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>

【讨论】：

很好的解释，现在我可以看出两者的区别了，谢谢

【解决方案3】：

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

【讨论】：

【解决方案4】：

从文档的正常流程中删除浮动元素（但不完全像绝对定位元素）。

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

如果您希望下一个元素留在最底行，则需要使用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>

【讨论】：