인프런 커뮤니티 질문&답변

그 부분은 float의 속성과 position의 속성에 대해서 이해하셔야 해용

float 속성과 position:absolute 속성모두 자식 요소들을 마치 공중에 띄운 것 처럼 위치를 조정하므로서

부모가 자식요소의 크기값을 인지하지 못하게 되니까 부모가 자식요소의 크기값 만큼

자신 스스로의 크기 값을 유지하지 못하기 때문에 높이값을 유지하지 못하는 것은

글쓴이 분이 말씀하신 것 처럼 동일 합니다.

position속성을 사용할 경우 position:relative; 속성과 position:absolute 속성을 통해

직접적인 부모관계를 설정하는 인과관계가 있는 속성입니다.  프로그래밍적으로 그렇게 관계가 설정되어있어요.

따라서, 부모요소(relative 상태)의 크기값을 지정해주어야

absolute속성이 된 자식이 기준점이 된 부모요소의 크기값에 근거하여 움직이게 되는 것이죠.

그렇기 때문에 overflow:hidden; 속성으로 높이값을 찾아줄 수 없습니다.

반면에 float속성을 사용할때 부모요소의  overflow:hidden; 을 사용하는 이유는

내가 갖고 있는 영역에서 넘친 요소만큼은 숨긴 처리를 하겠다! 는 의미가 있기 때문에

자기 자신이 갖고있는 영역을 유지하려고 하죠.. 그래서 float에는 overflow: hidden;을 사용하여

크기값을 유지 시키려 하는 것입니다.

다만 absolute 속성은 relative라는 속성이 짝꿍이기 때문에

부모요소에 relative를 쓰고, 자식요소가 뛰어놀 수 있는 만큼의 놀이방 크기를 지정해준다! 라고 생각하시면 편하실 것 같아용.

float 해제 속성에 대해 공부하시려면

float overflow:hidden;

float clear:both;

float clearfix 라고 구글에 검색해보시면 더욱 많은 자료를 찾아보실 수 있으실 거에요.