이미지 주변에 텍스트를 흐르게 하는 float의 본래 용도를 배웁니다.
float는 요소를 좌우로 띄우고 뒤의 인라인 콘텐츠가 주변을 감싸게 합니다. 현대의 전체 레이아웃은 Flexbox나 Grid가 적합하며 부모 높이 문제에는 flow-root나 clear를 사용합니다.
이미지라고 적힌 상자는 float: left로 왼쪽에 붙고, 뒤에 오는 문단의 글줄은 그 오른쪽 남은 폭에서 시작합니다. margin 0 16px 8px 0 가운데 오른쪽 16px는 글자와 상자 사이를, 아래쪽 8px는 상자 밑으로 돌아 들어오는 줄과의 간격을 만듭니다. 문단이 상자보다 짧아지더라도 .demo의 display: flow-root가 float를 감싸므로 테두리는 상자 아래까지 내려옵니다.
float된 요소에는 shape-outside를 줄 수 있어서, shape-outside: circle(50%)처럼 쓰면 글줄이 사각형 대신 원의 가장자리를 따라 흐릅니다. border-radius로 사진을 둥글게 깎아도 글줄은 여전히 사각형 상자를 피해 흐르므로, 모양을 따라 감싸려면 이 속성이 필요합니다.
페이지의 열 전체를 float로 만들면 높이와 정렬 관리가 어렵습니다.
직접 바꿔보세요float를 right로 바꾸고 margin 방향도 맞춰보세요.