Don't use float

#beginners #css

Of course you can use float don't be silly, but use it wisely because you have to pay it with clearfix 🙀

here what I mean

<div style="
    background: blue;
    display: block;
    clear: both; // put clear here for extra protection if there are any float before this element 😔
    overflow: hidden; // put this too 😭
"><p>container here </p>
    <div style="background:red;float:left;height: 100px;width: 100px;">child 1</div>
    <div style="background:red;float:left;height: 100px;width: 100px;">child 2</div>
    <div style="background:red;float:left;height: 100px;width: 100px;">child 3</div>
</div>

when we make a website, sometimes we have to create two div that divided equally to container width, our approach usually something like this

    <div class="container">
        <div style="
            float: left;
            width: 50%;
            background: red;
        ">
            div a
        </div>
        <div style="
            float: right;
            width: 50%;
            background: blue;
        ">
            div b
        </div>
    </div>

it's fine but when this element getting more complex, it's hard to make it proper unless you put clear at your container, to solve this issue use flex instead

<div class="container" style="
    display: flex;
    justify-content: space-evenly;
">
    <div style="background:red;width: 50%;">div a</div>
    <div style="background:blue;width: 50%;">div b</div>
</div>