float
해당 요소를 다음 요소 위에 떠있게 한다. (가리지는 않음)
position이 absolute와 병행해서 사용하면 안 됨.
width
float 적용 시 inline처럼 content의 크기만큼 width가 변경됨.
다음 block요소가 그 크기만큼 가로가 작아지는게 아님. (여전히 width 100%)
관련 문제
float가 선언된 요소와 그렇지 않은 요소간 margin이 사라짐
원인 : 후자 요소가 float가 아니기 때문에 박스 모델 상에서 문제가 생김
해결방법 : 후자 요소에 overflow : hidden을 선언
float 요소를 포함하는 부모 요소의 높이가 정상적으로 반영되지 않음
원인 : float 요소의 높이를 부모가 알지 못함.
해결방법
clearfix::after 가상 요소 추가 (권장)
.clearfix::after { content : ''; display : block; clear : both; }부모 요소에 overflow : hidden 선언