<ul> 即使没有崩溃 <li> 漂浮？

Question

What I know so far is that a parent with nothing but floated children has no height.

In the header for example, I have the left logo floated and the text has an absolute position. The only thing keeping the header from collapsing is the right logo.

 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> 

However, I don't understand why my first parent 'ul' in the 'nav' still has height even though all the li elements are floated.

 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> 

Here's my code on fiddle ( https://jsfiddle.net/vwb6g740/1/ )

Answer 1

This is true for block elements and inline elements, but not for inline-block elements.

What I know so far is that a parent with nothing but floated children has no height.

You have display:inline-block; set on that parent element.

I can't explain why, but I can reproduce that behavior.

 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>