當我刪除「overflow：hidden？」時，爲什麼隱藏導航欄？溢出做什麼？

我開始學習html，並在w3schools.com上獲得一些練習。我很好奇overflow: hidden代碼行。爲什麼刪除它時整個導航欄都會消失？我認爲溢出只是爲了隱藏滾動條？當我刪除「overflow：hidden？」時，爲什麼隱藏導航欄？溢出做什麼？

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: #111; 
 
}

<ul> 
 
    <li><a class="active" 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>

來源

2016-09-23 Joey

浮動元素不添加高度它們包含元素。添加overflow屬性給出包含ul高度（這是您的背景顏色來自哪裏）。在您的網絡瀏覽器中檢查並注意當overflow被移除時，ul高度將變爲0。

這是因爲背景顏色/文字顏色，你什麼都看不到。 nav li元素仍然存在，但您在白色文本中看不到白色。你沒有看到灰色的背景，因爲ul高度變爲0

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    /*overflow: hidden;*/ 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
    background-color: red; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: blue; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 
.spacer { 
 
    clear: both; 
 
    padding-top: 20px; 
 
    padding-bottom: 5px; 
 
} 
 

 
.withoverflow { 
 
    overflow: hidden; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
     
 
<div class="spacer">without overflow</div> 
 
    
 
<ul> 
 
    <li><a class="active" 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> 
 

 
<div class="spacer">with overflow</div> 
 

 
<ul class="withoverflow"> 
 
    <li><a class="active" 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>

來源

2016-09-23 20:28:38 mhatch

有一個float問題在你的代碼。由於您的ul的孩子是浮動的，所以父母並不擴展以包含所有孩子。通常我們使用clearfix方法，即允許父級獲得正確的高度，即使其子級是浮動的。

overflow: hidden;或overflow: auto;與clearfix方法具有相同的容量來解決此問題。

您可以更好地理解這裏吧：

What methods of ‘clearfix’ can I use?

CLEARFIX方法

與這些參數創建一個類clearfix：

.clearfix:after, .clearfix:before { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
}

現在，只要加入這個類中你想要修復的父元素。（在你案中ul）

這裏是你的代碼，並與clearfix方法工作小提琴：

https://fiddle.jshell.net/vs3Lqt22/

來源

2016-09-23 20:30:24

是溢出：隱藏確實比滾動條等附加任務。你的ul不會消失，這裏的問題是你將float添加到li中，所以如果你添加overflow，ul將不會爲浮動的子節點（li）分配空間：隱藏給父節點（ul）它不允許子節點溢出它會出現，你可以嘗試添加邊框：1px固體紅到ul並檢查，以便你可以理解這個邏輯。

隱藏溢出將隱藏滾動條，當它具有寬度和高度值。

來源

2016-09-23 20:30:29 Manivannan

當我刪除「overflow：hidden？」時，爲什麼隱藏導航欄？溢出做什麼？

回答

相關問題