为什么添加浮子属性会使我的Div表现得像内联块一样

Question

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

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

当我添加浮动propery时，这会使两个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>

为什么添加属性浮点：左div表现就像是inline-block

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>

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

Answer 2

您说这种特殊情况float的行为 inline-block是正确的。但实际上，它看起来就像是相同的方式。为了显示差异...假设您是在float:left上，下面有一些文本：然后您的DIV会在左侧出现，其余可用的水平房间将充满文本。

float：

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

Answer 3

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

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