CSS 기초 - float속성

float속성은 컨텐츠를 가로로 나열하거나 글의 본문 안 이미지를 넣거나 복잡한 레이아웃을 만들때 자연스러운 삽입을 위해 사용한다. 기본적인 문서 흐름에서 관계없이 박스를 왼쪽(left) 또는 오른쪽(right)으로 유연하게 배치할 수 있다.

1.float 의 속성값

• left : 요소를 왼쪽 방향으로 부유하게 설정
• right : 요소를 오른쪽 방향으로 부유하게 설정
• none : 기본값(default), 요소를 띄우지 않는다.

float을 설명하자면 사전적 의미로는 뜨다, 흐르다라는 뜻을 가지고 있다. 즉 html문서에서 공간은 차지하되 다른요소의 배치에 영향을 미치지 않은 요소로 만드는 것이다. float속성은 예제를 보며 이해하는것이 더 쉽다.

• 여기까진 float속성이 없으니 div태그 요소의 기본 display 속성값인 block이므로 한줄씩 혼자 차지하여 나타난다.

1. float:left값을 두번째 div인 hi에 넣어보았다.

float:left 속성을 주는 것은 content내용만큼만 공간을 차지하고 상대적으로 다른 상대에 대해서 왼쪽에 배치 후 붕떠있는것처럼 무시되어라 라는 뜻이다.

• 결과처럼 float:left주니 hello의 요소가 float속성을 지닌 hi요소의 내용공간만 인정해주고 그 외의 존재(여기선 block속성값)를 무시하고 배치된걸 볼 수 있다.

2.여기선 float:left을 div hi요소와 div hello요소 둘 다 주어보았다.

• 둘 다 block속성을 가지고 있지만 float속성으로 인해 무시되고 내용(content) 공간만 차지한 채로 왼쪽으로 배치되었다.

3. 그림 옆 배치

• img는 display 속성값 inline이므로 다른 요소들과 한 줄에 나란히 배치된다. 이미지와 글씨를 같이 배치해도 한 줄이상 배치 할 수 없지만 float의 속성을 이용하면 가능하다.
  

3-1.img태그에 float:right속성을 주어보았다.

• img에 float속성을 주었으므로 이미지가 상대적으로 오른쪽으로 배치되고 이미지만큼만의 공간을 차지한 후 나머지 공간은 무시되어 그 공간에 다음에 오는 요소가 배치된것을 볼 수 있다.

4. float 영향을 받지않게 해주는 clear 속성

• clear 속성을 준 요소는 float영향을 받지않않고 배치된다. clear 속성값에는 right,left,both 가 있다.
  float:right속성을 준 img요소 다음으로 오는 p의 요소에 clear:right속성을 주어보았다.
  
• 결과와 같이 clear:right 속성을 준 p요소는 float:right 속성에 영향을 받지않고 배치된것을 볼 수 있다.
  요소에 clear:right를 설정하면 float:right 속성에 영향을 받지않고 clear:left를 설정하면 float:left 속성을, clear:both를 설정하면 float속성의 right,left 둘 다 영향을 받지않고 배치할 수 있다.