什麼是溢出：隱藏在這個程序中呢？

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
.header { 
 
    background-color: #2196F3; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 15px; 
 
} 
 
.footer { 
 
    background-color: #444; 
 
    color: white; 
 
    padding: 15px; 
 
} 
 
.topmenu { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #777; 
 
} 
 
.topmenu li { 
 
    float: left; 
 
} 
 
.topmenu li a { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 
.topmenu li a:hover { 
 
    background-color: #222; 
 
} 
 
.topmenu li a.active { 
 
    color: white; 
 
    background-color: #4CAF50; 
 
} 
 
.column { 
 
    float: left; 
 
    padding: 15px; 
 
} 
 
.clearfix::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 
.sidemenu { 
 
    width: 25%; 
 
} 
 
.content { 
 
    width: 75%; 
 
} 
 
.sidemenu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.sidemenu li a { 
 
    margin-bottom: 4px; 
 
    display: block; 
 
    padding: 8px; 
 
    background-color: #eee; 
 
    text-decoration: none; 
 
    color: #666; 
 
} 
 
.sidemenu li a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 
.sidemenu li a.active { 
 
    background-color: #008CBA; 
 
    color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<ul class="topmenu"> 
 
    <li><a href="#home" class="active">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> 
 

 
<div class="clearfix"> 
 
    <div class="column sidemenu"> 
 
    <ul> 
 
     <li><a href="#flight">The Flight</a></li> 
 
     <li><a href="#city" class="active">The City</a></li> 
 
     <li><a href="#island">The Island</a></li> 
 
     <li><a href="#food">The Food</a></li> 
 
     <li><a href="#people">The People</a></li> 
 
     <li><a href="#history">The History</a></li> 
 
     <li><a href="#oceans">The Oceans</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="column content"> 
 
    <div class="header"> 
 
     <h1>The City</h1> 
 
    </div> 
 
    <h1>Chania</h1> 
 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
 
    <p>You will learn more about responsive web pages in a later chapter.</p> 
 
    </div> 
 
</div> 
 

 
<div class="footer"> 
 
    <p>Footer Text</p> 
 
</div> 
 

 
</body> 
 
</html>

我編這個程序，而不溢出：隱藏，它沒有給相同的輸出，我不明白爲什麼溢出：隱藏是必要的嗎？我甚至使用了overflow：auto，並且它不顯示滾動條，所以我知道這不是數據框太小。它出現在頂部菜單中。我是一個CSS的新手，它真的讓我感到困惑，爲什麼他們有兩個類的一些元素，爲什麼他們使用框大小，並請編輯，如果有任何問題，我有問，因爲downvoting它禁止我問問題和 - 讓我無奈。

來源

2017-10-12 Therebelentropy

我是一個經驗豐富的CSS用戶，這花了一段時間找我。 .topbar元素是沒有定義高度的ul，因此它會查看子元素以確定高度。但是，由於您的元素正在使用float，因此父級不會調整大小。

由於this previous answer討論，overflow: none，是解決這個問題的黑客。不過，我認爲這不是您的最佳做法。我要麼：

定義一個恆定的高度爲你的頂欄
使用flexbox而不是ul

來源

2017-10-13 00:02:24

什麼是子元素？ – Therebelentropy

@Therebelentropy https://www.w3schools.com/xml/xml_tree.asp –

我感謝你，但請你能詳細說明使用overflow：hidden。 – Therebelentropy

什麼是溢出：隱藏在這個程序中呢？

回答

相關問題