CSS position

float 속성

• float: none ➡ float 속성을 적용안함 (기본값)
• float: left ➡ 요소가 컨테이너의 왼쪽에 배치됨
• float: right ➡ 요소가 컨테이너의 오른쪽에 배치됨
• margin: auto ➡ 요소를 중앙에 배치  

 

 

clear 속성

• float 속성이 적용되면 다음 요소가 float 속성을 상속 받는데 이걸 해제시킴
• clear: left ➡ 왼쪽으로 배치된 float 속성 상속을 해지
• clear: right ➡ 오른쪽으로 배치된 float 속성 상속을 해지   
• clear: both ➡ 양쪽에 배치된 float 속성 상속을 해치 (추천)
• float 속성을 쓴 태그의 부모 요소에 ::after로 clear:both 해주면 됨
    이 부모 태그 안에는 float 속성이 들어간 태그만 사용하는 걸 추천함

 

 

position 속성

• position: static ➡ position 속성 없음 (기본값)
• position: fixed ➡ 요소가 브라우저 창에 고정되어 배치됨 (브라우저 창이 기준), 인라인 블록(inline-block)로 변경됨
• position: absolute ➡ 요소가 절대적인 위치에 배치 (부모 요소 기준), 인라인 블록(inline-block)로 변경됨
• position: relative ➡ 요소가 상대적인 위치에 배치  (내 원래 위치가 기준)
• 좌표 속성(left, right, top, bottom)은 fixed, absolute, relative 선언 된 경우만 사용 가능함