요소를 공중에 띄우는 속성.

공중에 띄워서 값에 따라 왼쪽이나 오른쪽으로 이동하게 되는데, 이러한 성질 덕분에 요소를 정렬할 수 있다.

예제와 같이 사진 옆에 글이 흐르듯이 연결되어 있는 레이아웃 등을 만들 때 효과적이다.

어떤 요소에 float를 주게되면 적용된 요소의 바로 다음 요소가 방향따라 달라붙게 된다.

공중에 띄워져서 빈 공간을 만들고 그 곳으로 컨텐츠가 들어가면서 원래의 레이아웃이 깨지기도 하고 완성되기도 한다.

1. float를 사용하려면

   float를 이용해 수평 정렬을 하려면 정렬을 하고 싶은 모든 요소에 float 속성을 넣어야 한다.

   만약 하나라도 float 속성을 빼먹을 시 아래와 같은 현상이 일어난다.

   BOX1

   BOX2

   BOX3

   BOX4

   마지막 요소의 배경색이 사라지고... 글자만 이상한 곳에 붙었다.

   왜이렇게 되었냐면 float 속성을 받게될 시 공중에 뜨는 성질 때문에 그렇다.

   공중에 뜬다 라는 건 레이어가 분리되었다는 걸 뜻한다. 포토샵으로 비유하면 다음과 같은 상태다.

   

   

   플롯이 적용된 BOX1 ~ BOX3은 공중에 띄워져 적용되지 않은 BOX4보다 한 층 위로 올라가게 된다.

   BOX4는 BOX1 ~ BOX3이 있던 자리가 텅 비게 되어 자리를 차지하느라 위로 올라가게 된다.

   이런 일련의 과정들이 일어나 BOX4가 마치 사라진 것처럼 보이는 것이다.

   사라진 게 아니라 단지 겹쳐서 안 보이는 것뿐.

   텍스트만 삐져나온 이유는 컨텐츠를 중시하는 html의 특성 때문에 그렇다.

   BOX1

   BOX2

   BOX3

   BOX4

   제대로 완성된 모습.

2. 핵심 요약

   1. float 속성은 요소를 공중에 띄운다.

   2. float 속성이 적용된 요소, 아닌 요소가 나뉘어져서 서로 분리된다.

   3. 따라서 정렬하고 싶은 모든 컨텐츠에 전부 플롯 속성을 적용해야 한다.