[CSS]Navigation을 만들때, li tag에 float 그리고 ul사라짐

영상을 보면서 CSS 를 공부하고 있었다.

 

li에  float 를 먹이면 화면에서 ul   영역이 사라짐

 

.nav ul{
    list-style-type: none;
    background-color: rgb(95, 95, 95);
    padding : 0px;
    margin : 0px;
    overflow: hidden; --->  li에다가 float:left를 먹인 후 overflow:hidden;을 적용하면 보임

}

.nav ul a{
    color :aliceblue;
    text-decoration: none;
    padding : 10px;
    display: block;
    text-align : center;
}

.nav ul a:hover{
    background-color: rgb(53, 52, 52);

}

.nav li{
    float:left;

 

 

li 에  float를 먹이는 이유도 잘 모르겠지만 float를 하면 갑자기 화면이 이미지가 사라짐

그런데 여기에 overflow:hidden;을 적용하면 수직형 nav가 생김

 

일단 구글링

레딧에 아래와 같은 내용이 있었음

The li's are being floated. When you float something it takes it out of the document flow, so the ul would essentially have no height because all of it's children are out of the flow.
So, using an overflow hidden clears the float allowing the ul to have a height. It's not something that's used a ton any more because floats are cumbersome and have been largely replaced by css flexbox and grid.

 

다시 말해, float가 ul에 있는 높이값을 지워버린다 것(충돌 등). 그래서 overflow:hidden을 통해서 노출시키는 것.

https://www.reddit.com/r/webdev/comments/bxkpp6/css_learning_why_overflow_hidden_in_navigation_bar/?rdt=41847 

 

 

힌트를 얻어 GPT chat에게 물어봄

Floats and Normal Flow:

• When you apply the CSS float property to an element, it takes that element out of the normal document flow. Floated elements are positioned to the left or right of their containing block, and the content that follows flows around them.

플로트 및 일반 흐름:

요소에 CSS float 속성을 적용하면 해당 요소가 일반 문서 흐름에서 벗어나게 됩니다. 플로팅 요소는 포함된 블록의 왼쪽 또는 오른쪽에 배치되며, 그 뒤에 나오는 콘텐츠는 플로팅 요소를 중심으로 흐릅니다.

 

Height of Floated Elements:

• Floated elements are taken out of the normal flow, and their parent container might not "see" them in terms of calculating its height. In other words, the parent's height won't expand to encompass the height of its floated children.

부동 요소의 높이:

부동 요소는 정상적인 흐름에서 벗어나므로 부모 컨테이너는 높이를 계산할 때 부동 요소를 "보지" 못할 수 있습니다. 즉, 부모의 높이가 플로팅된 자식의 높이를 포함하도록 확장되지 않습니다.

 

Collapsed Parent Height:

• When all the children of a container are floated, the container's height can collapse to zero because it doesn't consider the floated elements for its height calculation.
• This can lead to layout issues where content below the parent container ends up overlapping the collapsed container.

접힌 부모 높이:

컨테이너의 모든 자식이 플로팅된 경우 높이 계산 시 플로팅된 요소를 고려하지 않기 때문에 컨테이너의 높이가 0으로 축소될 수 있습니다.
이로 인해 부모 컨테이너 아래의 콘텐츠가 접힌 컨테이너와 겹치는 레이아웃 문제가 발생할 수 있습니다.

 

 

PS

flexbox와 grid가 나오면서 이런 이슈는 더 이상 생각하지 않겠되었다고 한다.