HTML/CSS - float 속성

 

 

1. float은

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

 

 

2. float 속성

초기값: none

적용대상: 모든 요소, 그러나 display가 none일 때는 적용이 안됨

상속: 되지 않는다.

미디어: 비주얼

 

float은 블록 레이아웃의 사용을 의미하기 때문에, 일부의 경우 display값의 계산값을 수정한다.

 

-구문

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

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

 

3. float이 위치 지정되는 방법

위에서 말한 바와 같이, 요소가 부동되면 문서의 보통 흐름에서 빠진다. 부동된 요소는 포함 박스나 다른 부동된 요소의 가장자리(edge)에 닿을 때까지 좌나 우로 이동된다.

 

아래 이미지에는, 빨간 사각형이 세 개 있다. 둘은 좌에 부동되고 하나는 우에 부동된다.

"왼쪽" 두 번째 빨간 사각형은 첫 번째 사각형 오른쪽에 놓인다.

추가 사각형은 그들이 포함 박스를 채울 때까지 계속해서 오른쪽으로 쌓인다. 그 후엔 다음 줄로 넘어갑니다(wrap).

 

 

 

 

 

출처

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

https://www.w3schools.com/css/css_float.asp