无法在导航栏上对齐左元素和右元素

<style>
    .left-element {
        float: left;
    }
    .right-element {
        float: right;
    }
</style>

<div class="left-element">左元素</div>
<div class="right-element">右元素</div>

<style>
    .navbar {
        display: flex;
        justify-content: space-between;
    }
</style>

<div class="navbar">
    <div class="left-element">左元素</div>
    <div class="right-element">右元素</div>
</div>

<style>
    .navbar {
        position: relative;
    }
    .left-element {
        position: absolute;
        left: 0;
    }
    .right-element {
        position: absolute;
        right: 0;
    }
</style>

<div class="navbar">
    <div class="left-element">左元素</div>
    <div class="right-element">右元素</div>
</div>