🔸 Float

    <div class="box floatLayout">
        <div class="item i1"></div>
        <div class="item i2"></div>
        <div class="item i3"></div>
        <div class="item i4"></div>
    </div>

div.box{
    outline: 2px solid red;
    width: 1080px;
    margin: 0 auto;
    margin-top: 80px;
}
div.box .item{
    width: calc(25% - 20px);
    height: 300px;
    width: calc(50% - 20px);
}
div.box .i1{background-color: #fc0;}
div.box .i2{background-color: #90f;}
div.box .i3{background-color: #10f;}
div.box .i4{background-color: #f0f;}

div.floatLayout{
    overflow: hidden;
}
div.floatLayout .item{
    float: left;
    margin: 0 10px;
}
div.floatLayout .i3,
div.floatLayout .i4{
    margin-top: 20px;
}

🔸 Flex

    <!-- 부모요소는 flex box 혹은 부모박스 라고 합니다. -->
    <div class="box flexLayout">
        <!-- 정렬될 대상을 flex item이라고 합니다. -->
        <div class="item i1"></div>
        <div class="item i2"></div>
        <div class="item i3"></div>
        <div class="item i4"></div>
    </div>

div.flexLayout{
    /* display의 user agent 값은 block 이라는 것을 알고 있어야 한다. */
    display: block;
    display: inline-flex;
    display: flex;
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-around;
    justify-content: space-between;
    flex-wrap: wrap;

    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    row-gap: 20px;
}
div.flexLayout .item{}