<ul> 即使浮动也不会折叠<li>？

Question

到目前为止，我所知道的是，除了浮动的孩子之外什么都没有身高。

例如，在标题中，我的左徽标浮动，文本具有绝对位置。唯一防止标头倒塌的是正确的徽标。

header {
  position: relative;
  font-family: "Felix Titling Regular", Times, serif;
  border-bottom: 2px double white;
  font-size: 0;
}
header a {
  display: inline-block;
}
header>a:first-child {
  position: relative;
  padding-left: 3%;
}
header>a:last-child {
  float: right;
  padding-right: 3%;
}
#center-wrapper {
  position: absolute;
  left: 50%;
  top: 25%;
  font-size: 16px;
}
header h1 {
  font-size: 300%;
  display: inline-block;
  position: relative;
  text-transform: capitalize;
  right: 50%;
}

<header>
  <a href="index.html"><img src="media/logo-small.png" alt="Godfather Logo" title="Godfather Small Logo" /></a>
  <div id="center-wrapper">
    <h1> loyal capos to the don </h1>
  </div>
  <a href="index.html"><img src="media/logo-small.png" alt="Godfather Logo" title="Godfather Small Logo" /></a>
</header>

但是，我不明白为什么我的第一位父母在"导航"中仍然具有高度。

nav {
  position: relative;
  border-top: 2px double #660000;
  text-align: center;
  font-size: 0;
  background-color: #660000;
}
nav>ul {
  display: inline-block;
  font-size: 16px;
  width: 100%;
}
ul {
  list-style-type: none;
}
nav>ul>li {
  min-width: 20%;
  float: left;
}
nav ul ul,
nav ul ul ul {
  position: absolute;
  display: none;
  width: 100%;
}
nav>ul>li:hover>ul {
  display: block;
}
nav>ul>li>ul>li:hover>ul {
  left: 100%;
  top: 0%;
  display: block;
}
ul>li {
  position: relative;
  padding: .4em 0;
  background-color: white;
}
li>a {
  color: #660000;
  text-decoration: none;
  text-transform: capitalize;
  font-size: 150%;
  font-family: "Felix Titling Regular", Times, serif;
  background-color: white;
}

<nav>
  <ul>
    <li><a href="#">wiki</a></li>
    <li><a href="#">media</a>
      <ul>
        <li><a href="#">images</a></li>
        <li><a href="#">videos</a>
          <ul>
            <li><a href="pages/videos/scenes.html">best scenes</a></li>
            <li><a href="#">bloopers</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">home</a></li>
    <li><a href="#">facts</a></li>
    <li><a href="#">about</a>
      <ul>
        <li><a href="pages/about/feedback.html">feedback</a></li>
        <li><a href="#">contact us</a></li>
      </ul>
    </li>
  </ul>
</nav>

这是我在小提琴（https://jsfiddle.net/vwb6g740/1/）上的代码

Answer 1

这对于块元素和内联元素是正确的，但对于内联元件而不是。

到目前为止，我所知道的是，只有漂浮孩子的父母没有身高。

您有显示：内联块；设置该父元素。

我无法解释原因，但是我可以复制这种行为。

p {
  display: inline-block;
  background: blue;
}
div {
  background: red;
}
span {
  background: green;
}
i {
  float: left;
}

<div><i>test</i></div>
<span><i>test</i></span>
<p><i>test</i></p>