1. float란?

Float 라는 단어는 원래 ‘뜨다’라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄어서 텍스트와 함게 배치할 것인가에 대한 속성이다.

• 블럭 요소를 가로로 나란히 정렬하기 위해서 float를 이용한다.
• float될 경우 기존 블럭 요소처러럼 너비가 넓게 퍼지지 않고 내부 영역만큼의 너비를 가진다.
• (텍스트 / 인라인 요소/ float된 요소)/만 float를 인식할 수 있다.

float를 해제하는 방법

1. float된 부모요소 바로 다음 박스에 clear: both;를 주어 해제한다.
2. Float된 부모요소에 또 다시 float를 사용한다. (float된 부모요소의 부모요소에도 float가 적용되어 있으면 어미요소의 float만 해제해주면 된다)
3. float된 부모 요소에 overflow: hidden을 사용한다.
4. Float 된 부모 요소에 display: inline-block을 사용한다.
5. Float된 어미요소에 :after{content:””, display:block; clear:both;}를 사용한다.(1번과 동일 하지만 바로 다음에 박스가 없는 경우 사용한다)

출처 링크

float를 해제해야 하는 이유

• 자식이 float될 경우 부모는 자식 요소의 영역을 파악하지 못한다
• 높이가 0으로 나올 수 있음
• 그냥 블럭의 경우는 float를 인식 못하기 때문에 float 된 요소 밑에 깔리게 된다
  

해결방법

1. 부모 요소에 임의의 height를 주어 높이값을 준다 (내부 요소 변경시 높이 바꿔줘야한다)
   2, 이자식 요소들 제일 마지막에 clear:both된 div 태그(빈값)을 넣어준다 부모태그가 높이를 인식한다.
2. 부모요소에 overflow: hidden을 줄 경우 float된 자식 요소들을 인식할 수 있다. (overflow:hidden을 주게되면 자식 요소의 margin값도 자식 요소로 인식한다.)

출처 링크