CSS property float와 clear 알아보기

float란?

콘텐츠의 컨테이너에서 왼쪽에 위치시킬지 오른쪽에 위치시킬지 정할 수 있는 옵션

설정 시 텍스트는 콘텐츠 주변을 감싸게 됨.

---

none

element가 float 되지 않음.

 

left

element가 컨테이너의 왼쪽에 float되게 됨.

 

right

element가 컨테이너의 오른쪽에 float되게 됨.

 

inline-start*

element는 컨테이너의 시작 부분에 float 되게 되며, ltr(left to right) 문서에서는 왼쪽 / rtl(right to left)문서에서는 오른쪽을 의미

 

inline-end*

element는 컨테이너의 끝 부분에 float 되게 되며, ltr(left to right) 문서에서는 오른쪽 / rtl(right to left)문서에서는 왼쪽을 의미

---

 

 

특히 inline-start와 inline-end의 경우 브라우저 지원율이 아직 낮은 편으로 일부 브라우저에서는 확인이 불가능할 수 있음.

 

CSS property: float: Flow-relative values `inline-start` and `inline-end` | Can I use... Support tables for HTML5, CSS3, etc

 

clear란?

floating된 element의 옵션을 취소할 수 있는 방법

---

none

floating element는 밑으로 내려지지 않음. (float 취소되지 않음)

 

left

left float 옵션이 적용된 element를 밑으로 내림.

 

right

right float 옵션이 적용된 element를 밑으로 내림.

 

both*

left & right 옵션이 적용된 element를 밑으로 내림.

 

---

clear: both 옵션이 보통 쓰이는 형태.

---

실습

See the Pen float pratice by woongwoongs (@woongwoongs) on CodePen.

 

저는 PC에서 확인 시 chrome 버전 117이기 때문에 float:inline-start & inline-end에 대해서 확인하지 못했지만,

아이폰으로 확인 시 (safari 지원 가능 value) 기본 옵션이 ltr (left to right) 문서이기 때문에 

float:inline-start는 마치 left옵션처럼, float:inline-end는 마치 right 옵션처럼 적용 됩니다.

 

---

Reference

float - CSS: Cascading Style Sheets | MDN