< ul>此代码中的height为0，为什么? (与溢出:隐藏有关) [英] <ul> height is 0 in this code, why? (it has to do with overflow:hidden)
问题描述
请参考以下代码:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
border: 1px solid red;
list-style-type: none;
margin: 0;
padding: 0;
/*overflow: hidden;*/ /* Remove this comments */
background: yellow;
}
li {
border: 1px solid red;
float: left;
}
li a {
display: block; /* what is this used for here? */
color: black;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color:red;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
我想知道为什么列表高度为零，即使其中有列表元素也是如此?
I would like to know why list height is zero, even though there are list elements in it?
如果您在CSS的 overflow:hidden 中进行注释，则列表的高度将为零，而不是零.你能说出原因吗?
If you comment in overflow:hidden in the css, then the list gets a proper height other than zero. Can you tell the reason?
推荐答案
ul的高度为零，因为您要浮动子元素，从本质上讲，它们将从包含列表的布局中删除.
The height of your ul is zero because you're floating your child elements which, in essence, removes them from the layout of the containing list.
如果您还浮动ul，您会看到它包含子元素li以及高度大小本身，因为我相信您正在寻找它.
If you also float your ul, you'll see that it contains your child li elements and the height sizes itself as I believe that you're looking for it to do.
关于float如何影响页面流量的其他信息，请参见此处 ，如果您好奇的话.
There is some further context on how float impacts page flow here, if you're curious.
这篇关于< ul>此代码中的height为0，为什么? (与溢出:隐藏有关)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
