css float

css float은 설정된 요소가 흐름을 빠져나와서 다른 요소들이 자기 컨테이너 주위에 배치되는 것을 제어할 수 있습니다.

말이 어려우니 예시와 함께 살펴보겠습니다.

 

float은 아래의 값과 같이 다양한 값을 가질 수 있습니다.

// 키워드 값
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

// 전역 값
float: inherit;
float: initial;
float: unset;

 

---

 

주요 값들의 예시만 살펴보면서 어떻게 화면에 출력되는지 살펴보겠습니다.

 

float: left 

float 설정을 left를 주게 되면 부모 영역의 top:0, left:0 으로 위치하게 되고 나머지 요소들은 자신의 주위를 감싸게 됩니다.

inline 요소임에도 width, height을 설정할 수 있습니다. 

마치 work나 한글에서 자주 볼수 있는 이미지의 정렬과 비슷하네요

float 설정된 요소끼리는 계속 옆으로 쌓이다가 부모영역의 width를 넘어가게 되면 줄바꿈 됩니다.

float: left;

 

float: right

float 설정을 right를 주게 되면 부모 영역의 top:0, right:0 으로 위치하게 되고 나머지 요소들은 자신의 주위를 감싸게 됩니다.

float: right

 

float: none

none을 부여하여 float이 적용되지 않았고 기존의 Inline 속성이 적용된 모습을 확인할 수 있습니다.

float: none;

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/float

float - CSS: Cascading Style Sheets | MDN

https://codepen.io/woobottle/pen/BamvNro