본문 바로가기
markup/css

css float

by 우보틀 2022. 3. 2.

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

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

developer.mozilla.org

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

 

'markup > css' 카테고리의 다른 글

css vertical-align  (0) 2022.03.02
css white-space  (0) 2022.03.02
css display: flex, flex: 1  (0) 2022.03.02
display: block, inline, inline-block, none  (0) 2022.03.01
box-sizing 속성  (0) 2022.03.01