Почему высота Div не по размеру контента внутри него?

Question

[SuperDuperPuper]

<div class = "NavBarDiv">
        <ul class = "NavBar">
            <li class = "liNavBar"><a class = "Logo" href="default.asp">Финяшка</p></li>
            <li class = "liNavBar"><a href="news.asp">Ценные бумаги</a></li>
            <li class = "liNavBar"><a href="contact.asp">НФТ</a></li>
            <li class = "liNavBar"><a href="contact.asp">Крипта</a></li>
            <li class = "liNavBar"><a href="contact.asp">Предложка</a></li>
            <li class = "liNavBar"><a style="float:right" href="about.asp">Вход/регистрация</a></li>
          </ul>
    </div>

div.NavBarDiv{
  border: black solid 3px;
}
ul.NavBar{
  list-style-type: none;
  display: inline;
}


li.liNavBar a{
  display: block;
  float: left;
  padding: 14px 16px;
  font-size: 20px;
  text-decoration:none;
}

li.liNavBar .Logo{
  font-size: 30px;
  position: relative;
  bottom:9px
}

Answer 1

[Вадим]

height: 65px;
Действительно... почему....

Comments

[SuperDuperPuper]

упс, забыл убрать. Если без этой высоты сделать, то у Div высота будет около 3 px

[Вадим]

SuperDuperPuper, потому что float: left у всех дочерних элементов, представляющих контент.
гуглите: схлопывание флоатов.
Которые Вам там вообще не нужны, к слову.
Сделайте flex на ul, либо inline-block на li

[Вадим]

https://developer.mozilla.org/ru/docs/Learn/CSS/CS...
Тут есть описание почему так происходит, раз уж делаете на флоатах, которые "мертвы" для разметки.