当左div元素变长时，如何确保我的左div元素不会改变右div元素的位置？

<style>
    .left {
        float: left;
    }
    .right {
        clear: both;
    }
</style>

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

<style>
    .left {
        position: absolute;
    }
    .right {
        position: relative;
        left: 200px; /* 根据实际情况调整左边距 */
    }
</style>

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

<style>
    .container {
        display: flex;
    }
    .left {
        width: 200px; /* 根据实际情况调整宽度 */
    }
    .right {
        flex: 1;
    }
</style>

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