[css] float

float 속성

모든 요소는 위에서 아래로, 그리고 좌측에서 우측으로 요소 박스의 경계대로 차례대로 배치된다. (보통의 흐름)

float을 이용하면

• 요소를 보통의 흐름에서 벗어나 띄워지게 한다. (floating)
• 주변 텍스트나 인라인 요소가 주의를 감싸는 특징이 있다.
  - 텍스트는 인라인요소이다.
  - 텍스트를 블록요소에 담아도 텍스트는 인라인요소이기 때문에 float된 요소를 감싼다.
• float된 요소들의 display 값을 block으로 변경한다. (flex는 예외)

float은 원래 이미지와 텍스트를 어떻게 배치할 것인지 정의하기 위해 사용한다.

예전에는 float을 이용해서 레이아웃을 사용했는데, 이제는 flex, grid같은 속성들로 레이아웃을 할 수 있으니 본래 정의대로 이미지와 텍스트를 어떻게 배치할지 정의할 때 사용하도록 하자.

div { float: none | left | right | initial | inherit }
/* 기본값 : none */

float 속성값

• none : float 시키지 않는다. (기본값)
• left : 좌측으로 float 시킨다.
• right : 우측으로 float 시킨다.

clear 속성

요소를 floating 된 요소의 영향에서 벗어나게 하는 속성이다.

오직 block 레벨 요소만 적용 가능하다.

div { clear: none | left | right | both | initial | inherit }
/* 기본값 : none */

clear 속성값

• none : 양쪽으로 floating 요소를 허용 (기본값)
• left : 왼쪽으로 floating 요소를 허용하지 않음
• right : 오른쪽으로 floating 요소를 허용하지 않음
• both : 양쪽으로 floating 요소를 허용하지 않음