HTML CSS浮动和内联块问题

共有三个块，第一个和最后一个块向左浮动，中间一个块显示为内联块并同时清除。为什么我的中间街区要走到尽头？这是我的密码

.box{
宽度：200px；
高度：200px；
背景：红色；
}
.街区{
高度：200px；
宽度：200px；
背景：蓝色；
显示：内联块；
明确：两者皆有；
}
.box1{
浮动：左；
}
.box2{
浮动：左；
背景：绿色；
}

1st块
中间块
第三个块

清除

属性仅适用于块级别元素，因此将其添加到

内联块

不会产生任何效果，也不会像您预期的那样清除浮动

---

float-CSS属性指定元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素已从网页的正常流中删除，但仍然存在

内联块

该值使元素生成一个内联级别块容器

---

从左开始依次放置所有浮动图元，然后放置其他未浮动图元

如果希望块元素位于中间

那就做这个

.box1{
浮动：左；}
.box2{
浮动：右；}

然后，内联块元素将自动居中

我建议您将所有元素都设置为内联块，因为它们的宽度和高度都相同。这也是响应性设计的最佳方式。

删除中间框中的css“显示：内联块；清除：两者”；并添加“浮动：左”

.box{
宽度：200px；
高度：200px；
背景：红色；
}
.街区{
高度：200px；
宽度：200px；
背景：蓝色；
/*
显示：内联块；
明确：两者皆有；
*/
浮动：左；
}
.box1{
浮动：左；
}
.box2{
浮动：左；
背景：绿色；
}

1st块
中间块
第三个块

您可以从中间块（.block）中删除内联块 在新的部门里说唱就这样。 就这样,

CSS:

HTML:

第一街区
中间块
第三街区

---

**就像Bootstrap所做的一样

，因为您创建了另一个float:left，因为float就是这样工作的。float主要不是关于应用它的元素的对齐方式，而是关于以下内容如何围绕该元素流动。您需要将

float:left

添加到所有三个块中

.rowed {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

<div class="rowed">
  <div class="box box1">1st Block</div>
  <div class="block">Middle Block</div>
  <div class="box box2">Third block</div>
</div>