HTML CSS浮动和内联块问题

Question

共有三个块，第一个和最后一个浮在左边，中间的一个显示在行内块中，并且都清除了。为什么我的中间方块会在结尾？这是我的代码。

.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

Answer 1

所有浮动元素均从左开始放置，然后再放置其他未浮动元素

如果您希望block元素位于中间

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

，然后自动插入行元素将居中。

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

Answer 2

clear属性仅适用于 block level 元素，因此将其添加到inline-block中不会产生任何效果，也不会清除浮动。 >

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

---

  

float CSS属性指定元素应沿着其容器的左侧或右侧放置，允许文本和内联元素环绕在其周围。尽管仍然 ^ref

，该元素已从网页的常规流程中删除。

  

inline-block

     

此值使元素生成内联级块容器 ^ref

Answer 3

删除中间框中的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>

Answer 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所做的一样