이미지 주변에 텍스트를 흐르게 하는 float의 본래 용도를 배웁니다.
float는 요소를 좌우로 띄우고 뒤의 인라인 콘텐츠가 주변을 감싸게 합니다. 현대의 전체 레이아웃은 Flexbox나 Grid가 적합하며 부모 높이 문제에는 flow-root나 clear를 사용합니다.
이번 예제의 출발점은 float: left; margin-right: 16px;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 float를 right로 바꾸고 margin 방향도 맞춰보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
페이지의 열 전체를 float로 만들면 높이와 정렬 관리가 어렵습니다.
직접 바꿔보세요float를 right로 바꾸고 margin 방향도 맞춰보세요.