horizontal_bar {

Question

我目前正在学习CSS，目前我遇到了“溢出”问题。这是我正在练习的代码。我不明白为什么当我把它变成溢出时：可见，那么网页会变成白色？为什么会这样？我已经尝试了所有其他可能的溢出解决方案，如自动，滚动。它们都按我期望的方式工作，但不是可见的情况？任何人都可以向我解释为什么会这样吗？

在我的CSS中，

        * {
            color: white;
            margin: 0;
            padding: 0;
        }

        #horizontal_bar {
            background-color: black;
            overflow: hidden; /* When I change it to overflow: visible; the webpage turns white, why is it the case? */
            margin-top: 2em;
        }

        #horizontal_bar ul li{
            list-style-type: none;
            float: left;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        #horizontal_bar ul li img {
            height: 12px;
        }

        #horizontal_bar ul li a {
            text-decoration: none;
            padding: 5px 20px;
            height: 12px;
        }

        a:focus, a:hover {
            background-color: gray;
        }

        #content {
            clear: left;
        }

在我的HTML中，

<body>
    <div id="horizontal_bar">
            <ul>
                <li><a href="" >HTML</a></li>
                <li><a href="" >CSS</a></li>
                <li><a href="" >JAVASCRIPT</a></li>
                <li><a href="" >SQL</a></li>
                <li><a href="" >PHP</a></li>
                <li><a href="" >jQuery</a></li>
                <li><a href="" ><img src="images/search2.png" alt="search"/></a></li>
            </ul>
    </div>
    <div id="content">
        <p>Hello</p>
    </div>
</body>

以下是我捕获的2个屏幕截图。第一个是这种情况，当我将overflow属性设置为隐藏时，后一个是我将overflow属性设置为visible时的情况。 overflow: hidden overflow: visible

希望对overflow = visible时的情况有一个很好的解释。感谢。

Answer 1

内部li有float:left，导致外部元素丢失其维度。外部元素需要指定float或overflow才能使它们增长并包含内部浮动元素。

不仅overflow:hidden，其他一些价值如auto和overlay也会使div增长。

默认情况下，div为overflow:visible。所以它没有任何效果。

这里已有答案 - how-does-css-overflowhidden-work-to-force-an-element-containing-floated-elem

Answer 2

您需要设置height属性以及overflow以获得预期的输出。

请尝试以下操作： Demo

#horizontal_bar {
    background-color: black;
    height:34px;
    overflow: visible;      
    margin-top: 2em;
}

有关overflow的详细信息，请参阅 MDN here

Answer 3

粘贴此

horizontal_bar {

background-color: black;
float: left;
margin-top: 2em;
overflow: visible;
position: relative;
width: 100%; }

CSS溢出问题（带导航栏）

3 个答案:

horizontal_bar {

CSS溢出问题（带导航栏）

3 个答案:

horizo​​ntal_bar {

horizontal_bar {