작성한 질문수 18

1

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

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

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

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

0

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

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

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

1. 부모요소에 overflow: hidden

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

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

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

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