Float

CSS

baegofda_ 2020. 11. 5. 18:34

- float : left | right | none;

- 부모의 요소에서 나와서 떠있게 됩니다. 🛬

- 기본적으로 block를 가지게 됩니다.

- 텍스트의 경우엔 float 된 content를 인식하여 자동으로 배치됩니다.

- 구성한 레이아웃이 망가질 가능성이 많습니다.

float

CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.

developer.mozilla.org

- 부모요소에 overflow : hidden을 사용하거나 clearfix를 사용합니다.

- clear : left | right | both

- clear property를 사용하여 다음에 오는 요소에게 float의 위치를 인식하게합니다.

- pseudo-element(가상요소)인 ::before, ::after과 같이 사용하며 처리합니다.