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) и стучать по нему внутри нового элемента 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 делает

Answer 2

Все элементы с плавающей точкой помещаются слева сначала один за другим, а затем другие не всплывающие элементы помещаются

, если вы хотите, чтобы элемент блока был посередине

, тогда сделайте это .box1{ float:left;} .box2{ float:right;}

, а затем автоматически элемент встроенного блока придет в центр.

Я предлагаю вам сделать все элементы встроенного блока самими, так как они имеют одинаковую ширину и высоту. Это лучший способ для адаптивного дизайнатакже.

Answer 3

Удалить css in middle box "display: inline-block; очистить: оба;"и добавьте «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

Свойство

clear применяется только к элементам уровня блока , поэтому добавление его к элементу inline-block не окажет никакого эффекта и не очистит плавающий объект, как вы ожидаете.

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

---

Свойство float CSS указывает, что элемент должен быть размещен вдоль левой или правой стороны его контейнера, разрешение обтекания текстом и встроенными элементами .Элемент удаляется из обычного потока веб-страницы, хотя все еще ^ref

inline-block

Это значение заставляет элемент генерировать контейнер встроенного уровня контейнер ^ref