需要指导-导航栏问题清除：同时显示：表格

编程问答 2022-06-08

问题描述

我对代码的这一特定部分感到困惑。如果有人可以向我解释，将不胜感激！ 我正在制作导航栏，它看起来像这样：

enter image description here

这是我感到困惑的CSS的一部分：

    img{
      weight:100px;
      height:100px;
      border-radius: 100%;
    }
    body{
      margin:0;
    }
    header{
      background-color: lightblue;
    }
    
/*don't really understand this part*/
    header::after{
      content:" ";
      display:table;
      clear:both;
    }
    .container{
      width:80%;
      margin:0 auto;
    }
    .logo{
      float:left;
      padding:5px 0;
    }
    nav{
      float:right;
    }

    nav ul{
      margin:0;
      padding:0;
    list-style: none; /*remove HTML bullets*/
    }
    nav li{
      display:inline-block;
      margin:0 25px;
      padding-top:55px;
      font-family: 'Montserrat',sans-serif;

    }
    nav a{
      color:#444;
      text-decoration: none;
      text-transform: uppercase;
    }
    nav a:hover{
      color:black;
    }


<!-- language: lang-html -->

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <Meta charset="utf-8">
        <title>My logo</title>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <!--a navbar should be in header section becuase it's not the content-->
        <header>
          <div class="container">
            <img class="logo" src="logo.jpg" alt="">
            <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Product</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact us</a></li>
              </ul>
            </nav>
          </div>

        </header>


      </body>
    </html>

header::after{content:" "; display:table; clear:both; }

所以我的问题是，如果没有这部分代码，图片中的背景色将消失，我不明白为什么，尤其是display：table和clear：both。我确实有徽标，并且li的两面都漂浮着，而且很清晰：两者都不能阻止它们漂浮，而且背景颜色仍然会显示出来。我感到困惑的是为什么它在那里以及显示和清除这两个都会影响背景颜色。谢谢！

解决方法

这是因为您已经浮动了标头的所有内容。这就像给它们一个绝对位置并将它们从其父级流中删除一样，这意味着没有其他内容的父级容器将像空容器一样​​工作。您还可以给标题设置一个高度，以查看背景颜色，但是，这可能会使根据内容包装的调整变得更加困难。

有问题的CSS通过:: after的内容道具添加了一些内容。然后，清除浮点数以使标题可以看到内容，从技术上讲，它是父项。显示表也可以是显示块。它只是确保after行为像元素一样，如果将其放置在html中。但是相反，您是用CSS伪造的。

css-floatdisplayhtmlnavbar