HTML CSS float 和内联 block 问题

Question

一共有三个 block ，第一个和最后一个向左浮动，中间一个显示为inline-block并且都被清除。为什么我的中间 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

Answer 1

所有 float 元素从左开始依次放置，然后放置其他非 float 元素

如果你想让 block 元素在中间

然后做这个 .box1{ 向左飘浮;} .box2{ float :右；

然后内联 block 元素将自动居中。

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