Html 为什么当我在CSS中使用float:right property时ul元素消失了？

为什么当我使用CSS中的

float:right

属性时，我的

ul

元素消失了

我正在为这个网站建立导航

您可以在代码笔中找到代码：

CSS

/*-----------------------------------*/
/* HEADER */
/*-----------------------------------*/

header {
    background-color: #de654e;
}

.logo-link h1 {
    font-family: "lobster", sans-serif;
    font-size: 42px;
    padding: 2% 0 2% 6%;
    display: inline-block;
    }

.menu-navigation li {
    display: inline-block;
    float: right;
    color: #fff;
}

---

原因是，当您将float属性添加到元素的所有子元素时，父元素将没有高度，因此链接将显示在标题之外，并且链接与页面背景混合。要解决此问题，您可以在菜单导航中添加以下内容：

overflow:auto

但我建议您使用其他技术，如flexbox或使用内联块来构建布局

您可以在此处阅读有关浮动的更多信息：

---

我建议您尽可能多地使用flex属性，因为它在将来的工作中对响应行为非常有用。 对于当前我在标题中看到的内容，您在左侧有徽标，在右侧有导航，您的html如下所示：

<header>
        <nav>

            <a href="#" class="logo-link"><h1>Creative</h1></a>
            <ul><li>...

---

欢迎来到堆栈溢出。请在问题中包含相关代码，而不仅仅是指向外部站点的链接。你看，我试过你的css，它的工作。谢谢你，笨蛋！

nav { 
display: flex;
justify-content: space-between;
}