float는 블록요소를 강제로 좌우배치 할 때 사용
하지만 float에 설정된 요소는 높이값을 인지하지 못하기 때문에 부모 요소에 강제로 높이를 지정해야함.
float 해제 방법
-
float된 요소의 부모태그에 강제로 높이 값을 지정해줍니다. (단점 : 반응형시 자동 높이 값 설정 불가)
-
float된 요소의 부모태그에 overflow:hidden을 적용해줍니다. (단점 : 해당 요소 안의 컨텐츠를 박스 외부로 표현해줄 수 없음)
-
float된 요소의 부모태그에 overflow:auto를 적용해줍니다. (단점 : 특정 브라우저에서 스크롤 바가 표시 됨)
-
float된 요소의 부모태그에 float을 또 설정해줍니다. (단점 : 가운데 배치 불가능)
-
float된 요소의 다음에 나오는 태그에 clear:both를 지정합니다.(단점 : clear:both가 적용된 요소에는 margin-top 적용 불가)
6. float된 요소의 부모태그에 가상요소를 만들고 해당 요소에 clear:both를 지정해줍니다. 권장**
메모장