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 所做的那樣