Тонкости работы float. Можно ли сделать две колонки для 4-х блоков (1-2 3-4)

Question

Хочу понять можно ли имея 4 вот таких блока сделать чтобы слева были 1-2 а справа 3-4 в две колонки:

Если же второму блоку убрать clear: left; тогда правые уже подтягиваются наверх, но тогда второй не становится под первым, а становится справа от него и получается вот так:

знаю что все давно делается на flex и grid, просто любопытно разобраться как работает float.

понятно, что можно сделать два отдельных блока обертки в каждом из которых будет по два таких блока и задать этим оберткам float, но вот реально интересно почему в данном случае нельзя так сделать. Тем более что если смотреть в консоли то элементам вроде ничего не мешает сместиться вверх, к тому же если 3-му блоку задать отрицательный margin (-70px) то он без проблем сунется вверх и дает ожидаемый результат. Так в чем проблема?

.wrapper div
{
  border: thick solid;
  text-align: center;
  background: lightblue;
  padding: 30px;
  height: 45px;
  width: 25%;
  box-sizing: border-box;
}

.wrapper {
    border: thick solid red;
    overflow: auto;
}

.div-1 {
  float: left;
  /* clear: left; */
}

.div-2 {
  float: left;
  clear: left;
}

.div-3 {
  float: right;
  /* clear: right; */
  /* margin-top: -70px; */
}

.div-4 {
  float: right;
  clear: right;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="wrapper">
        <div class="div-1">1</div>
        <div class="div-2">2</div>
          <div class="div-3">3</div>
          <div class="div-4">4</div>
        </div>
</body>
</html>

Answer 1

.wrapper div
  {
    border: thick solid;
    text-align: center;
    background: lightblue;
    padding: 30px;
    height: 45px;
    width: 25%;
    box-sizing: border-box;
  }

  .wrapper {
    border: thick solid red;
    overflow: auto;
  }

  .div-1,
  .div-2{
    float: left;
  }

  .div-2{
    clear: initial;
  }

  .div-3,
  .div-4{
    float: right;
  }

  .div-4{
    clear: right;
  }

<div class="wrapper">
    <div class="div-1">1</div>
    <div class="div-3">3</div>
    <div class="div-4">4</div>
    <div class="div-2">2</div>
  </div>

БЛОГ НА HUSL

Тонкости работы float. Можно ли сделать две колонки для 4-х блоков (1-2 3-4)

Ответы (1 шт):