当使用浮动对齐徽标时，header 变得不稳定 HTML

Question

所以我对 html 和 css 非常陌生，我想创建一个网站。 但是当我使用 float: left; 为了让我的标志保持在左边，header 变得不稳定。

https://jsfiddle.net/bm0dynw6/

 .logo { float: left; }

 <div class="header"> <img class="logo" src="PolyNOTEMBLEM.png" width="330" height="82.5" /> <button id="Home" class="tablink" onclick="window.location.href='[Redacted]'" > Discord invite </button> </div>

Answer 1

您可以使用

.header::after {
    display: block;
    clear: both;
    content: "";
}

或者

.header {    
    display: flex;
    justify-content: space-between;
}

并从徽标中删除float:left

Answer 2

用这个

.header {    
    display: flex;
    align-items:flex-start;
}