★★★★★display & position , float & clear

- html의 기본 넓이값은 화면의 100%이다.

- 모든 요소는 자신보다 앞에 있는 형제 공간요소의 흐름에 영향을 받는다(형제의 자식에겐 안 받음). static이건, relative건, absolute건, fixed건, float이건 위치값인 top과 left가 특정지어지지 않는다면 자신의 앞에 있는 공간요소의 흐름에 영향을 받아 배치된다.

- 위치의 기준점인 top: 0, left: 0은 static이 아닌 가장 가까운 부모요소의 왼쪽 상단이 기준점이다.

- 요소의 크기값이 정해지지 않으면 자신이 담고있는 내용물(텍스트, 자식요소 등)의 공간값에 의해 크기값이 결정된다. 즉 내용물이 position: absolute, fixed; float이면 크기값에 반영되지 않는다.

- 텍스트는 inline 요소이다.

- 화면에 표시될 수 있는 공간의 넓이가 부모크기를 넘치면 개행된다. (inline, float, clear로 float과 상호작용하는 relative-block 요소들)

position: static

- 기본값이다.

- 공간을 부여해주며 이 공간값을 기준으로 형제 요소들이 흐른다.

- 위치를 지정할 수 없다.

- z-index를 지정할 수 없다.

position: relative;

- 위치를 지정할 수 있다.

- z-index를 지정할 수 있다.

- 공간을 부여해준다.

position: absolute;

- 위치값을 지정할 수 있다.

- z-index를 지정할 수 있다.

- 공간이 없다.(본인 공간이 없기 때문에 이후의 형제요소들에 대한 공간영향력을 행사하지 않는다.)

position: fixed;

- 위치값을 지정할 수 있다.

- 위치의 기준점이 window이기 때문에 항상 화면에 보여지며 화면에 고정되어있다.

- z-index를 지정할 수 있다.

- 본인 공간이 없다.

display: inline;

- 요소의 흐름에 따라 배치된다.

- 크기를 지정할 수 없다.

display: block;

- 요소의 크기를 지정할 수 있다.

- 요소의 크기만큼 공간을 갖는다.

- position: static, relative이면 횡 공간값의 기본값은 부모의 100%이다.

- position: absolute, fixed이면 공간이 없어진다.

display: inline-block;

- inline요소와 block요소의 결합으로, 요소의 흐름에 따라 배치되지만 크기값이 특정지어질 수 있다.

- 크기값이 곧 공간값이다.

float

- float은 float된 형제 요소들과 inline 요소에게 공간력을 행사한다.

- inline 요소가 float 요소 사이에 껴있으면, float된 마지막 요소 다음에야 배치된다.

- float요소 앞에 relative 블록요소가 있으면 역시 공간의 영향을 받는다.

clear

- float 요소의 뒤에 있는 position: relative; display: block; 요소들은 앞의 float의 공간력을 행사받지 않으므로 앞의 float에 상관없이 배치된다.

- 그런데 clear 속성이 적용되어 있으면, 앞의 float의 공간력에 영향을 받게 된다.

- 그러면 공간의 크기가 100%여야 하는 이 relative-block 요소들은 float의 공간력에 영향을 받게 되어 개행을 하게 된다.