为什么我必须添加“溢出：隐藏”才能使导航栏在页面上可见？ [复制]答案

【问题标题】：Why do I have to add "overflow:hidden" to make the navigation bar visible on the page? [duplicate]为什么我必须添加“溢出：隐藏”才能使导航栏在页面上可见？ [复制]
【发布时间】：2017-08-17 21:11:15
【问题描述】：

我是 css 的新手，整个上午都在努力解决我的代码的以下问题。如果有人能帮我找出原因，我将不胜感激。

如果我不将“ul.navBar”的“溢出”设置为“隐藏”，为什么导航栏会从页面中完全消失？ p>

<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>

这是navigation bar 的代码页。

【问题讨论】：

标签： css

【解决方案1】：

如果我不将ul.navBar的overflow设置为hidden，为什么导航栏会完全从页面中消失？

这是因为.navBar 的子元素正在浮动。浮动元素从正常的文档流中取出，不占用空间。因为孩子们不占空间.navBar没有高度。

添加 overflow: hidden; 会触发一个新的块格式化上下文，以防止 .navBar 在浮动子元素时“折叠”。

有些人会建议使用display: inline-block;。请谨慎使用，因为每个元素周围都会有空白区域，这会使它们比您想象的要大。尤其是在使用百分比宽度时。

例子：

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>

如果您选择inline-block 路线，这里有一些关于how to handle the white space 的选项。

【讨论】：

【解决方案2】：

浮动元素（在本例中为您的 li）的高度为 0。因此，基本上，您的 ul 元素的高度为 0 像素。

将display: inline-block 添加到您的li 元素可以更正此问题。因此，您的ul 的overflow 样式不是必需的。

ul.navBar {
    list-style-type: none;
    margin: 0px;
    padding:0px;
    background-color: #4277f4;
    cursor: pointer;
}

li {
    display:inline-block;
}

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;
}

<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>
        </ul>
</body>
</html>

【讨论】：

如果行内元素周围的空白成为问题怎么办？如何处理？
@hungerstar 边距和内边距应该是你所需要的全部
恕我直言，这是一个草率的解决方案。事情变得比他们需要的更复杂。使用overflow: hidden; 或clearfix 要简单得多。
@hungerstar 情况决定
我不知道当所说的空白是一个问题时，人们会选择从带有边距和填充的内联元素中处理空白。请提供一个示例，其中边距/填充更喜欢使用浮动或弹性框。我真的很好奇。

【解决方案3】：

问题是您正在浮动您的 li 元素，这导致 ul 没有高度。尝试改用display:inline-block;。

ul.navBar {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    background-color: #4277f4;
    cursor: pointer;
}

li {
    display:inline-block;
}

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;
}

<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>

【讨论】：

如果行内元素周围的空白成为问题怎么办？如何处理？
Here's a good article on that