Flex容器中使用float:right无法将元素右移的原因咨询

我在flex容器.nav-bar里尝试用float:right把.logo元素向右对齐，但元素完全没动。目前已经通过margin-left:auto实现了右移，但想搞清楚float:right在这里无效的原因。

核心原因：Flex布局会忽略float属性 #

当父元素设置了display: flex后，它的所有子元素都会变成flex项目（flex item），此时Flex布局的规则会完全接管这些子元素的排列逻辑，传统布局里的float、clear、vertical-align属性都会被浏览器直接忽略。

float是为传统块级流式布局设计的，用来实现文字环绕等效果，但Flex布局有自己独立的对齐、空间分配机制——比如通过容器的justify-content属性，或者给子元素设置margin:auto来实现元素的左右对齐，这才是Flex环境下的正确做法。

修正后的代码示例 #

CSS代码 #

* { margin: 0; padding: 0; }
.background-image { 
    background-image: url("https://solscan.io/static/media/banner-header-1.c1e47687b38c8afc4f948ebd7004acf8.svg"); 
    background-repeat: no-repeat; 
    background-position: center top; 
    height: clamp(150px, 15vh, 20vh); 
    width: 100vw; 
    background-size: cover; 
    position: absolute; 
    top: 0; right: 0; 
    z-index: -1; 
}
.nav-bar { 
    position: relative; 
    z-index: 2; 
    margin: 1.2rem 0.8rem; 
    display: flex; 
}
.logo { 
    display: flex; 
    /* float: right; 此属性在flex容器中无效 */
    margin-left: auto; /* Flex布局下的正确对齐方式 */
}
i { font-size: 29px; color: white; }

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Page title</title>
</head>
<body>
    <div class="background-image"></div>
    <header class="header">
        <nav class="nav-bar">
            <img src="https://solscan.io/static/media/logo-solana-scan.ae03f445fd27dddc90c859d8728cbb44.svg">
            <div class="logo">
                <i class="fa-solid fa-bars"></i>
            </div>
        </nav>
    </header>
</body>
</html>

内容的提问来源于stack exchange，提问作者gaito Uzumaki