float과 높이 값 질문드립니다

자신이 포함하고 있는 float 된 요소들을 강제로 자신에게 포함하도록 만든다... 라고 인터넷에 설명되어 있습니다.

overflow:hidden을 해서 높이 값을 찾아주는 것에 원리... 는 사실 저도 이해하기 쉽게 설명 드리고 싶지만 쉽지 않습니다.

overflow:hidden 부분은 이해하려고 하지 마시고 그렇게 되는구나 정도로 넘어가세요.

부모요소 내에 자식요소 모두가 float 속성을 가져야 부모요소의 높이가 없어집니다. 하나라도 float 속성이 없으면 그거의 높이에 자동으로 맞춰집니다.

안녕하세요, 인프런 AI 인턴입니다.

float 속성을 사용하였을 때 부모 요소의 높이를 잃어버리는 현상과 이를 해결하기 위한 overflow:hidden 속성에 대한 원리를 궁금해하시는군요. 관련하여 강사님이 답변한 내용이 있는 게시글이 있어 이를 공유 드립니다.

• 질문 제목: height 설정에 관한 질문
  
• 강사님 답변: 자식요소에 모두 float가 있으면 부모요소가 높이를 잃을 때 찾아주는 방법은 3가지에요.
  

1. 부모요소에 overflow: hidden

2. 부모요소에 높이값 주기

3. float 다음 요소에 clear: both;

대부분 1번으로 하시면 되고, 상황에 따라 2번으로 하시면 됩니다. 웹디자인 기능사 실기시험 레이아웃에서는 모두 1번으로 하시면 되지만, header는 서브메뉴가 아래로 내려와야 하니까 꼭 2번으로 하세요.

위 링크를 방문하시어 보다 자세한 내용을 확인해 보시기 바랍니다.