position + display + float

position

요소를 배치하는 방법을 정하는 속성
static : Default 아무런 영향을 주지 않는다.

relative : 본인을 기준으로 top,right,bottom,left 등의 값이 적용된다.

absolite : 상위 relative 태그를 기준으로 값이 적용된다.

fixed : 화면을 특정 위치에 고정시킨다. 상위 relative,fixed 태그를 기준으로 값이 적용된다. 스크롤 되어도 움직이지 않는다.

display

inline : 줄바꿈 없이 한 줄을 차지한다. span, a ,img태그 등이 있다.
width, height 속성이 무시된다.
margin과 padding도 좌우만 반영되며 상하는 무시된다.

block : 줄바꿈이 들어간다. div,p 태그 등이 있다.

inline-block : inline과 마찬가지로 줄바꿈이 없는 태그. button이나 select 등이 있다.
차이점은 width,height,margin,padding의 제약이 없다.

float

정렬을 위해 사용되는 속성으로 left, right, none 등의 속성을 받을 수 있다.

왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 떠있듯이 정렬 시킬 수 있다.

레이아웃을 무너트리게 되므로 clear(플로팅 해제)를 해주어야 한다.

대표적인 방법

// float를 준 부모요소 다음 박스에 아래 css를 적용한다.
.clear { clear:both; }