为什么我必须添加“ overflow：hidden”使导航栏在页面上可见？ [英] Why do I have to add "overflow:hidden" to make the navigation bar visible on the page?
问题描述
我是CSS的新手，并且整个上午都在努力解决以下代码问题。如果有人可以帮助我找出原因，我将非常感激。
如果我不这样做，为什么导航栏会从页面上完全消失要将 ul.navBar的溢出设置为隐藏？
< ; html>
< head>
< style>
ul.navBar {
list-style-type：none;
保证金：0px；
padding：0px;
溢出：隐藏；
background-color：＃4277f4;
cursor：指针；
}
li {
float：left;
}
li a {
display：inline-block;
颜色：白色；
text-align：center;
padding：14px 16px;
字体家族：Verdana，Geneva，Tahoma，sans-serif；
font-size：20px;
文字修饰：无；
}
li：hover {
background-color：＃A2AEB3;
}
.dropDownContent {
display：none;
头寸：绝对；
background-color：＃7DC9E3;
宽度：150像素；
框阴影：0px 8px 16px 0px rgba（0，0，0，0.2）;
z-index：1；
文字修饰：无；
}
.dropDownContent a {
color：white;
显示：块；
}
.dropDownContent a：hover {
background-color：＃4A96B0; li.dropDownBtn：hover .dropDownContent {
display：block;
}
li.dropDownBtn：hover .dropDownContent {
display：block;
}
< / style>
< / head>
< body>
< ul class = navBar>
< li>< a href =＃> Home< / a>< / li>
< li class = dropDownBtn>< a href =＃> Products< / a>
< div class = dropDownContent>
< a href =＃> Product1< / a>
< a href =＃> Product2< / a>
< a href =＃> Product3< / a>
< / div>
< / li>
< li>< a href =＃> Service< / a>< / li>
< li>< a href =＃> Contact< / a>< / li>
< / body>
< / html>
这是此导航栏。
为什么如果我没有将
的 overflow设置为<$，导航栏会从页面上完全消失吗？ c $ c>隐藏？
发生这种情况是因为的子元素.navBar 正在浮动。浮动元素将从正常文档流中取出，并且不会占用空间。因为孩子不占用任何空间，所以 .navBar 没有高度。
添加溢出：隐藏； 会触发一个新的块格式化上下文，以防止 .navBar 在浮动了子代后发生崩溃 。 / p>
有人会建议使用 display：inline-block; 。请谨慎使用，因为每个元素周围都会有空白，这会使它们比您想象的要大。
示例：
ul，li {保证金：0;填充：0; list-style：none;} li {宽度：33.3333％;}。inline li {display：inline-block;背景色：金色；}。float li {float：left; background-color：indianred;}。flex {clear：left;显示：flex; background-color：skyblue;}
< ul class = 内联> < li< One< / li> < li>两个< / li> < li>三个< / li< / ul>< ul class = float> < li< One< / li> < li>两个< / li> < li>三个< / li< / ul>< ul class = flex> < li< One< / li> < li>两个< / li> < li>三个< / li>< / ul>
有关如何处理空白的一些选项如果您选择了 inline-block 路线。
I'm a newbie to css and have been struggling with the following problem of my code for the whole morning. I would really appreciate it if someone can help me find out the reason.
Why does the navigation bar totally disappear from the page if I don't set the "overflow" of "ul.navBar" to "hidden"?
<html>
<head>
<style>
ul.navBar {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #4277f4;
cursor: pointer;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
text-decoration: none;
}
li:hover {
background-color: #A2AEB3;
}
.dropDownContent {
display: none;
position: absolute;
background-color: #7DC9E3;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-decoration: none;
}
.dropDownContent a {
color: white;
display: block;
}
.dropDownContent a:hover{
background-color: #4A96B0;
}
li.dropDownBtn:hover .dropDownContent{
display: block;
}
</style>
</head>
<body>
<ul class="navBar">
<li><a href="#">Home</a></li>
<li class="dropDownBtn"><a href="#">Products</a>
<div class="dropDownContent">
<a href="#">Product1</a>
<a href="#">Product2</a>
<a href="#">Product3</a>
</div>
</li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</body>
</html>
Here's the code page for this navigation bar.
Why does the navigation bar totally disappear from the page if I don't set the
overflowoful.navBartohidden?
This is happening because the child elements of .navBar are being floated. Floated elements are taken out of the normal document flow and do not take up space. Because the children take up no space .navBar has no height .
Adding overflow: hidden; triggers a new block formatting context that prevents .navBar from "collapsing" when it has floated children.
Some people will suggest using display: inline-block;. Use with caution as each element will have white space around it that will make them larger than you think. Especially when using percentage widths.
Example:
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 33.3333%;
}
.inline li {
display: inline-block;
background-color: gold;
}
.float li {
float: left;
background-color: indianred;
}
.flex {
clear: left;
display: flex;
background-color: skyblue;
}
<ul class="inline">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul class="float">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul class="flex">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Here's some options on how to handle the white space if you chose the inline-block route.
这篇关于为什么我必须添加“ overflow：hidden”使导航栏在页面上可见？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
