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

Answer 1

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

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

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

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

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

Answer 2

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

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

---

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

内联块

该值导致元素生成内联级块容器^引用

Answer 3

删除中间框中的 css“display: inline-block;clear: both;” 并添加“浮动：左”

 .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) 中删除 inline-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 所做的那样