Когда я плаваю элемент, я не могу понять размещение элементов

Question

.wrapper {
  width: 500px;
}

.image {
  display: inline-block;
  width: 50%;
  height: 100px;
  background: red;  
  
}

.image1 {
  float: left;
  width: 50%;
  height: 50px;
  background: yellow;
}

.image2 {
  float: left;
  width: 50%;
  height: 50px;
  background: red;
}

<div class="wrapper">
<div class="image"></div>
<div class="image1"></div>
<div class="image2"></div>
</div>

https://jsfiddle.net/6o4ynucb/

Когда я думал, image2, кажется, должен находиться под image1, но это не так т занимать место. В чем проблема?

Answer 1

Вам необходимо принять во внимание спецификацию , чтобы понять это поведение. Если вы проверите правило, вы можете прочитать следующее:

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

Затем для строчного блока вы можете читать:

В контексте встроенного форматирования блоки располагаются горизонтально, один за другим, начиная с верхней части содержащего блока. Между этими полями соблюдаются горизонтальные поля, границы и отступы. Блоки могут быть выровнены по вертикали по-разному: их нижняя или верхняя часть может быть выровнена, или базовые линии текста внутри них могут быть выровнены. Прямоугольная область angular, которая содержит прямоугольники, образующие линию, называется линейным прямоугольником. ^ref

В вашем В этом случае inline-block создает линейный блок, высота которого логически определяется встроенным блоком ¹ . Первый поплавок может располагаться внутри этого линейного поля слева (там достаточно места), но не второй поплавок. Таким образом, будет применяться правило (6), и оно начнется под этим строковым блоком.

Вот небольшая анимация ширины плавающего элемента, чтобы лучше видеть:

.wrapper {
  width: 500px;
}

.image {
  display: inline-block;
  width: 50%;
  height: 100px;
  background: red;  
  
}

.image1 {
  float: left;
  width: 50%;
  height: 50px;
  background: yellow;
  animation:change 5s linear infinite alternate;
}

.image2 {
  float: left;
  width: 50%;
  height: 50px;
  background: blue;
  animation:change 5s linear infinite alternate;
}

@keyframes change {
  from {
    width:10%;
  }
}

<div class="wrapper">
<div class="image"></div>
<div class="image1"></div>
<div class="image2"></div>
</div>

Плавающий блок смещается влево или вправо, пока его внешний край не коснется края содержащего блока или внешнего края другого поплавка. . Если есть строчный блок, внешний верх плавающего блока выравнивается с верхом текущего строчного блока .

Если недостаточно места по горизонтали для поплавка , он смещается вниз до тех пор, пока он не поместится или не исчезнут поплавки.

Подробнее здесь: https://www.w3.org/TR/CSS21/visuren.html#floats

Еще один интересный результат, если вы уменьшите высоту встроенного блока:

.wrapper {
  width: 500px;
  border:1px solid;
}

.image {
  display: inline-block;
  width: 50%;
  height: 20px;
  background: red;  
  
}

.image1 {
  float: left;
  width: 70%;
  height: 50px;
  background: yellow;
  animation:change 5s linear infinite alternate;
}

.image2 {
  float: left;
  width: 70%;
  height: 50px;
  background: blue;
  animation:change 5s linear infinite alternate;
}

@keyframes change {
  from {
    width:10%;
  }
}

<div class="wrapper">
<div class="image"></div>
<div class="image1"></div>
<div class="image2"></div>
</div>

1. когда ширина обоих меньше 50%, оба могут поместиться внутри строчного поля перед встроенным блоком
2. когда оба ширина превышает 50%, следующий поплавок перемещается вниз и начинается с верхней части линейного блока, определенного встроенным блоком, и касается правого края первого поплавка
3. , когда каждая ширина превышает 50%, оба поплавок двигаться вниз

¹ Обратите внимание на небольшое пространство между встроенным блоком и поплавком, когда они движутся вниз. Это связано с выравниванием базовой линии, которое является важным фактом при определении линейного блока.

Вы можете изменить выравнивание, чтобы удалить его:

.wrapper {
  width: 500px;
  border:1px solid;
}

.image {
  display: inline-block;
  vertical-align:top;
  width: 50%;
  height: 20px;
  background: red;  
  
}

.image1 {
  float: left;
  width: 70%;
  height: 50px;
  background: yellow;
  animation:change 5s linear infinite alternate;
}

.image2 {
  float: left;
  width: 70%;
  height: 50px;
  background: blue;
  animation:change 5s linear infinite alternate;
}

@keyframes change {
  from {
    width:10%;
  }
}

<div class="wrapper">
<div class="image"></div>
<div class="image1"></div>
<div class="image2"></div>
</div>

Answer 2

Вы должны попробовать вот так:

<div class="wrapper">
<div class='col1'>
  <div class="image1"></div>
  <div class="image2"></div>
</div>
<div class="image"></div>
</div>

И css:

.image {
  display: inline-block;
  width: 50%;
  height: 100px;
  background: blue;  

}

.col1 {
  float: left;
   width: 50%;
}

.image1 {
  height: 50px;
  background: yellow;
}

.image2 {
  height: 50px;
  background: red;
}