html - HTML CSS 浮动和内联块问题

Question

共有三个块，第一个和最后一个向左浮动，中间一个显示为 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

标签： htmlcsscss-float

Answer 1

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

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

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

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

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