float은 생각보다 사용하기가 쉽지 않은 것 같다.
예상과 다르게 움직이는 경우도 종종 있는데 이 float에 대해 한 번 정리해보면 좋을 것 같아서 이리 저리 찾아봤는데 생각보다 할 게 많다.
좀 더 자세한 건 나중에 더 공부해보도록 하고
용례나 그림등은 mdn이 더 이해가 잘 되니
난 왜 float을 사용하게 되었는지,
clear는 또 왜 사용하게 되는 건지 조금 찾아보았다.
일반적인 흐름, 블럭과 인라인
float을 처음 접했을 때 가장 궁금했던 건 왜 필요한가?였다.
float이 생겼을 때 가장 주 목적은 이미지를 '자연스럽게' 삽입하기 위함이라고 한다.
텍스트와 이미지의 자연스러운 조화!
오케 근데 내 궁금증은 왜 인라인으로 안 되는 거지? 이거다.
인라인은 자기 자신의 크기만 가진다며?
아래의 예시를 보자
태그는 분명 인라인이고 자기 자신의 크기만 가지면
텍스트들이 저 위로 예쁘게 향할 수 있는 거 아닌가?
(물론 중고등학생 때부터 00 보고서 작성한다고 docx 파일에 사진 오지게 넣은 k-대학생은 자연스럽게 안 되는 걸 직감할 수 있음)
왜 이렇게 애매하게 올라오는 거냐고~ 올라오지나 말등가~~
그러다 여기서 힌트를 찾았다.
인라인에도 "인라인 박스" 개념이 있었다.
물론 이 박스를 직접 선택할 수 있는 건 아니고 css 내부적으로 생성되는 박스인 것 같다.
인라인 박스는 팔짱 끼면서 정렬하는데 공간이 부족하면 내려보낸다.
그래도 여전히 같은 "인라인 박스" 안에 있다. 끊어져 보여도 이어져 있다는 것이다.
<strong></strong> 부분 이외의 텍스트도 이름은 없지만 인라인 박스이다.
이 인라인 박스 사이즈(높이)는 인라인 박스 안에 있는 것들 중에서 가장 큰 값을 따라간다.
그래서 strong된 부분이 아닌 글자를 드래그 해보면 가장 큰 사이즈로 높이가 정해지는 것을 볼 수 있다.
그래서 위의 파인애플 예제에서도 파인애플 사진 크기 많큼 뒤의 인라인 박스가 그 사이즈를 가지게 된다. 그리고 그 상태로 수평으로 다 들어오지 못하기 때문에 밑으로 내려가게 된다.
Float, 너 대체 뭐야
float은 여러 방법으로 설명될 수 있다. 문자 그대로 띄워서 이동한다고 이해할 수 있고, 같은 의미로 부동소수점처럼 계속 변화할 수 있는 속성이라고 이해할 수 있다.
그러나 내 생각에는 이 모든 설명 중에 가장 핵심이 되는 설명은
블럭과 인라인이라는 정상 흐름에서 빠진다.인데
뒤에 어마무시한 설명이 하나 더 있다.
The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
그럼에도 불구하고 그 플로우의 파트이긴 하다....
이게 먼 개똥 같은 소리지
앞에서 언급되었듯이 블럭과 인라인은 "흐름(flow)"이고 이게 가장 정상적으로 css가 그리는 방식이다.
그러나
flow로 지정된 요소는 기존 흐름을 무시하고 다른 float된 요소의 가장자리에 부딪힐 때까지 이동한다.
하지만 블럭 또는 인라인 흐름을 아예 무시하는 건 아니다.
먼 소리인가 싶지만
아예 무시하는 경우인 position:absolute 를 생각하면 이해가 된다.
position:absolute의 경우에는 자신을 둘러싼 컨테이너를 아예 무시하고 화면을 기준으로 다시 배치된다. 하지만 float은 멀리 떠나는 친구 같은 느낌으로, 여전히 자기 뒤에 그려질 요소들에 영향을 준다.
그 맥락으로 clear 같은 것이 등장한 것이기도 하다.
