float

float

말 그대로 붕 떠있다는(float) 의미이며 이미지를 택스트로 감싸
같이 배치하기 위해 사용하는 속성입니다.

작동 원리로는 HTML를 해석하여 엘리먼트가 하나하나 배치되다가 float로 지정된 엘리먼트를 만나면 left or right 에 따라 배치하고 다음에 오는 엘리먼트로 감싸거나 자리를 채우게 됩니다.

다만 float를 지정했을경우 자식 요소의 내용만큼만 자리를 차지하며(display: block; 을 무시) 부모 태그가 float 속성의 자식 태그를 인식하지 못한다는 문제점이 있습니다. 따라서 float속성의 자식 태그만을 가졌을 경우 부모 태그의 높이가 0이 되어버립니다. 이럴경우 overflow: auto; or overflow: hidden;를 사용하여 해결할 수 있습니다.