CSS속성_float

모든 요소는 기본적으로 보통의 흐름에 따라 위에서 아래로, 그리고 좌측에서 우측으로 배치됩니다.

요소 박스의 경계대로 차례대로 배치되며, float 속성은 요소를 보통의 흐름에서 벗어나 독자적인 공간 위에 배치되게 합니다. 주로 레이아웃을 만들면서 영역을 좌우로 분할하여 만들 때 사용하는 용도로 선언합니다.

float을 이용하면 주변 요소들과 더욱 자연스럽게 배치될 수 있지만, floating 되지 않은 주변 요소들에도 영향을 주기 때문에 잘 이해하고 사용해야 합니다.

 

 

float 속성

요소를 float(요소를 보통의 흐름에서 벗어나게함) 시킬지 지정하는 속성입니다.

float : 가라앉지않고 물에 뜨다. 떠가다.

속성값 (기본값 :none)

1. none : float 시키지 않음

2. left : 좌측으로 float

3. right : 우측으로 float

 

float 요소는 보통의 흐름에서 벗어나 띄어지는 특징을 갖습니다.

 

동일한 box들이지만 flot를 선언한 경우 기존의 다른 요소들과 속해있지못하고 따로 보여지고 있습니다.

---

주변 텍스트나 인라인요소가 주위를 감싸는 특징이 있습니다.

---

대부분 요소의 display 값을 block으로 변경합니다. (display 값 변경 예외: inline-tabe, flex 등)

box2와 box3은 둘 다 span (인라인 레벨요소) 으로 동일한 조건으로 style을 선언하였습니다.

그런데 왜 둘의 크기가 다를까요?

인라인레벨요소는 width, height를 적용하지않습니다. 그래서 box2는 크기가 설정되지 않았습니다.

그런데 box3은 float 선언이 되면서 인라인레벨요소인 span이었지만 블록레벨요소로 변경되었고, 블록레벨요소이기 때문에 width, height 값이 적용되면서 크기가 변한 것입니다.