css float 수평 정렬 속성(left, right)에 대해서 알아보자

웹 페이지를 만들 때 가장 많이 사용하는 스타일 속성입니다.

float 속성의 의미는 '뜨다'라는 뜻을 가지고 있습니다. 즉, 이미지를 띄워서 텍스트와 어떻게 배치할 것인가를

다루는 속성이라 생각하면 됩니다.

 

float : inherit, left, right, none

 

float 속성에 사용 가능한 키워드는 inherit, left, right, none 가 있습니다.

inherit	부모 요소에서 상속
left	왼쪽에 박스를 생성하며, 페이지 내용은 박스 오른쪽에 위치
right	오른쪽에 박스를 생성하며, 페이지 내용은 박스 왼쪽에 위치
none	요소를 부유시키지 않는다.
※ left, right 를 통해 부유속성을 지정시 display는 무시됩니다. 이 때 none 은 제외됩니다.

 

See the Pen Untitled by Hokyun (@Grayruma) on CodePen.

 

style 속성에 float을 사용하지 않는다면 위와 같이 나타납니다.

하지만 style 속성에 left 또는 right 속성을 입력한다면 아래와 같습니다.

 

See the Pen Untitled by Hokyun (@Grayruma) on CodePen.

 

이미지 또는 박스를 생성하여 수평 정렬을 할 때 많이 사용됩니다.