Блог

Главная - Вопросы по программированию - Требуется руководство — вопрос панели навигации (очистить: оба и отобразить: таблица)

Требуется руководство — вопрос панели навигации (очистить: оба и отобразить: таблица)

#html #css #css-float #navbar #display

#HTML #css #css-float #панель навигации #отображение

Вопрос:

Я запутался в этой конкретной части кода. Если бы кто-нибудь мог мне объяснить, я был бы очень признателен!! Я создаю панель навигации, и она выглядит так:

введите описание изображения здесь

Это часть 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@600amp;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; }

Итак, мой вопрос заключается в том, что цвет фона на рисунке исчезнет без этой части кода, и я не понимаю, почему, особенно для отображения: таблица и очистить: оба. У меня есть логотип и плавающая часть li с обеих сторон, и clear: оба не останавливают их от плавания, и цвет фона все равно будет отображаться. Я не понимаю, почему он там и как отображение и очистка обоих повлияют на цвет фона. Спасибо!!

Ответ №1:

Это потому, что вы переместили все содержимое заголовка. Это все равно, что присвоить им всем абсолютную позицию и удалить их из потока их родителя, что означает, что родительский контейнер без другого содержимого будет действовать так, как если бы он был пуст. Однако вы также можете задать заголовку высоту, чтобы увидеть цвет фона, что может затруднить настройку на основе переноса содержимого.

Рассматриваемый CSS добавляет некоторый контент через ::after’s content prop . Затем вы очищаете значения с плавающей точкой, чтобы содержимое отображалось по заголовку, который технически является родительским. Таблица отображения также может быть блоком отображения. Он просто гарантирует, что after действует так же, как элемент, если бы он был помещен в html. Но вместо этого вы подделываете его с помощью CSS.