Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

当我添加float属性时，它会使两个div的行为类似于内联块：

＆＃13;

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

＆＃13;

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

＆＃13;

为什么添加属性float：left使div的行为类似于内联块

Answer 1

使用float以其他inline元素可以包围它们的方式从正常文档流中获取元素;它不会使它们像inline-block元素一样。

如果您想要其他方法来实现相同的效果，请查看以下示例。

示例1：

以下是在父元素上使用display: flex以使子项保持在同一行的示例。

＆＃13;

body {
  display: flex;
}

#block1 {
  width: 20%;
  background-color: red;
  height: 100px;
}

#block2 {
  width: 70%;
  background-color: yellow;
  height: 100px;
}

＆＃13;

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

＆＃13;

示例2：

以下是在两个元素上使用display: inline-block的示例，以使它们保持在同一条线上。此外，父母使用font-size: 0来确保中间的差距消失。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

示例3：

以下是在两个元素上使用display: table-cell以使它们保持在同一行上的示例，而在父元素上使用display: table。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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>

为什么向左添加属性float会使div的行为类似于内联块

4 个答案: