overflow:hidden 역할에 대해서

Question

.header-area > .navbar 에서 overflow:hidden이 어떤 역할을 하는지 알려주실 수 있나요? 이 부분을 주석처리해도 겉으로 보기에는 딱히 달라지는게 없기도 하고 내용이 박스를 벗어났을 때 숨김처리 한다는 속성이 여기서 어떻게 적용되는지 궁금합니다.

leesumin900685 · Answer

안녕하세요. ^^ 질문주신 내용에 대해 테스트해보고 말씀드립니다. .header-area > .navbar 내부에는 a태그(.navbar-toggler)가 있습니다. a(.navbar-toggler)태그의 경우 float속성을 갖고 있는데요. float 속성을 지닌 자식태그를 가진 부모태그는 높이를 height 속성을 이용하여 명시적으로 지정해주지 않으면 높이가 사라지게 됩니다. 그래서 이에 대한 조치로 overflow: hidden을 주어 부모태그의 높이를 자식태그에 맞추도록 하고 이렇게 형성된 부모태그의 높이를 기반으로 a(.navbar-brand) 브랜드 태그의 높이를 잡아주게 됩니다. 여기선 내용이 박스를 벗어났을 때의 처리를 위해 쓰였다기보다는 float 속성의 자식태그를 가진 부모 태그에 높이를 부여해주기 위해 쓰였다고 보시면 되겠습니다. 적절한 답변이 되었는지 모르겠습니다. 관심갖고 영상 봐주셔서 감사합니다.