"오버플로 : 숨김"을 삭제할 때 탐색 표시 줄이 숨겨져있는 이유는 무엇입니까? 오버플로는 무엇을합니까?

나는 html을 배우기 시작했고 w3schools.com에서 연습을하고 있습니다. 나는 코드의 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이됩니다.

아무 것도 보이지 않는 배경색/텍스트 색상 때문입니다. 탐색 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; OU 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은 사라지지 않을 것입니다. 여기에 문제가 생겼습니다. flo에 float를 추가하면 ul은 떠 다니는 자식 (li)을위한 공간을 할당하지 않을 것입니다. overflow를 추가하면 : parent (ul)에 숨김으로써 자식이 자신의 한계를 초과하여 넘칠 수 없습니다. 그것이 나타납니다, 당신은 테두리를 추가 할 수 있습니다 : 1px 고체 빨간색 ul 및 확인이 논리를 이해할 수 있도록.

오버플로 숨김은 너비와 높이 값이있을 때 스크롤 막대를 숨 깁니다.

출처

2016-09-23 20:30:29 Manivannan

"오버플로 : 숨김"을 삭제할 때 탐색 표시 줄이 숨겨져있는 이유는 무엇입니까? 오버플로는 무엇을합니까?

답변

관련 문제