HTML CSS 浮动和内联块问题答案

【问题标题】：HTML CSS floats and inline-block issuesHTML CSS 浮动和内联块问题
【发布时间】：2018-10-15 17:05:07
【问题描述】：

共有三个块，第一个和最后一个向左浮动，中间的一个显示为 inline-block 并清除两者。为什么我的中间块会在最后？这是我的代码。

.box {
  width: 200px;
  height: 200px;
  background: red;
}
.block {
  height: 200px;
  width: 200px;
  background: blue;
  display: inline-block;
  clear: both;
}
.box1 {
  float: left;
}
.box2 {
  float: left;
  background: green;
}

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

https://codepen.io/suraj_122/pen/EdZpag

【问题讨论】：

因为你做了另一个浮动：左
因为浮动工作就是这样。浮动主要不是关于你应用它的元素的对齐方式 - 而是关于以下内容将如何围绕这个元素流动。
三个区块都需要添加float: left

标签： html css css-float

【解决方案1】：

所有浮动元素从左到右依次放置，然后放置其他非浮动元素

如果你想让块元素在中间

然后做这个 .box1{ float:left;} .box2{ float:right;}

然后内联块元素会自动居中。

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

【讨论】：

【解决方案2】：

clear 属性仅适用于块级元素，因此将其添加到 inline-block 不会产生任何影响，也不会像您预期的那样清除浮动。

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

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

内联块

这个值会导致一个元素生成一个inline-level块容器^ref

【讨论】：

【解决方案3】：

移除中间框“display: inline-block;clear: both;”中的css并添加“float:left”

.box {
  width: 200px;
  height: 200px;
  background: red;
}
.block {
  height: 200px;
  width: 200px;
  background: blue;
  /*
  display: inline-block;
  clear: both;
  */
  float:left;
}
.box1 {
  float: left;
}
.box2 {
  float: left;
  background: green;
}

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

【讨论】：

【解决方案4】：

您可以从中间块 (.block) 中删除内联块并在新的 div 中说唱，这就是全部。就像这样：

CSS：

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

HTML：

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

** 就像 Bootstrap 所做的那样

【讨论】：