과거로의 회귀: 플로트 및 레이아웃

flexbox 및 grid와 같은 레이아웃을 만드는 더 나은 도구가 있지만 나중에 레이아웃 목적으로 float를 사용해야 하는 테스트를 작성하고 float 작동 방식을 이해하는 데 어려움이 있기 때문에 블로그에서 설명하여 배울 수 있다고 생각했습니다.
어쩌면 누군가에게 도움이 될 수도 있지만 그렇지 않을 수도 있습니다.

기초

레이아웃을 살펴보기 전에 단순히 텍스트 주변을 떠다니는 것부터 시작하겠습니다.
이것은 float가 주로 사용되는 것입니다. 먼저 이미지와 두 개의 단락이 있습니다.


그런 다음 float:right 스타일을 이미지에 적용하면 깔끔한 플로팅 효과가 생깁니다.

<img style="float:right" src="cat.jpg" alt="cat"> 
<p>This is a very pretty cat, and a very simple text. </p>
<p>This is another very simple text, but a bit longer. </p>

고양이의 왼쪽에 두 번째 텍스트가 떠다니지 않게 하려면 단순히 clear:both 스타일을 지정하여 부동 요소를 무시할 수 있습니다.

<img style="float:right" src="cat.jpg" alt="cat"> 
<p>This is a very pretty cat, and a very simple text. </p>
<p style="clear:both">This is another very simple text,
but a bit longer. </p>

플로팅 블록

이제 레이아웃 도구로 떠다니는 스케치에 들어갈 수 있습니다. 플로트가 어떻게 작동하는지 알아낸 후 얼마 동안 플로트가 그렇게 어렵지 않다는 것을 알았습니다. 그러나 처음에는 매우 기발해 보였던 몇 가지 사항을 설명하겠습니다.

여기에는 두 개의 간단한 블록이 있으며 지금은 float가 없습니다.



이상한 행동 nr. 1 - 첫 번째 플로트를 왼쪽으로 주면 조금 더 낮게 움직입니다.
이상한 행동 nr. 2 - 콘텐츠가 부동 요소 주위를 이동하는 동안 블록 자체는 그렇지 않습니다. 이것이 콘텐츠의 절반이 빨간색 블록 아래에 있는 이유입니다.



첫 번째 블록의 위치 변경은 플로트 요소 여백이 무너지는 것을 멈추기 때문에 블록 여백이 문서 상단에서 일정 거리를 제공하고 첫 번째 블록 여백이 추가로 추가되기 때문에 발생합니다.
두 번째 동작은 float가 부동 블록이 아닌 경우 작동하는 방식입니다. 이것이 float로 레이아웃을 만들 때 두 블록 모두에 제공해야 하는 이유입니다.



또 다른 흥미로운 사실은 두 번째 요소가 가변 상자 항목일 때 플로팅 항목 아래로 이동하지 않는다는 것입니다(여백 문제는 여전히 남아 있으므로 두 번째 항목에 관계없이 float를 사용해야 함).



여기에 파란색 요소가 있습니다display: flex;.

직접 사용해보십시오!

플로팅 블록을 가지고 놀고 싶다면 다음 코드펜을 사용해 보십시오(속성 버튼 클릭).