보통 p, h1, div 같은 엘리먼트를 블록 엘리먼트라고 부릅니다.

이런종류는 화면에 표시될 때 블록상자처럼 표시하기 때문에 이렇게 불리우게 되었습니다.

반면에 strong, spen 등과 같은 엘리먼트는 한줄이거나 한줄의 박스로 표시되기 때문에 인라인 엘리먼트라 불리웁니다.

블록박스는 하나씩 세로 방향으로 나타나고

인라인박스는 수평방향으로 자리를 잡게됩니다.

여기에 포지션 방식인 normal flow(일반흐름방식), float(플로트방식), absolute positoin(절대위치방식) 방식을 이용하면 위치를 조정할 수 있게됩니다.

상대위치

상대위치(relative positioning) 개념은 쉽게 이해할 수 있을 겁니다. 해당위치를 유지하면서 시작점으로 부터 top, bottom, left, right 값에 따라 수평, 수직방향으로 이동합니다.

절대위치

절대위치(absolute positioning)은 문서의 흐름에서 벗어나 절대위치로 동작하게 됩니다. 상대위치가 지정된 조상 엘리먼트 중 가장 가까운 엘리먼트의 위치에서 수평, 수직방향으로 이동하게 됩니다.

* 이런 위치값을 이용하다보면 박스간 겹치는 일이 발생하게 됩니다. 이때 유용한 속성이 z-index입니다. 여러개의 박스가 위아래로 겹칠때 z-index값이 높은 박스가 위로 올라오게 됩니다.

고정위치

고정위치(fixed positioning)은 절대 위치 지정의 하위 분류에 속합니다. 이 방법을 이용하며 브라우저 창에 항상 동일한 위치에 표시되는 엘리먼트를 만들 수 있습니다.

플로팅

박스를 플로트로 띄우게 되면 그 박스를 둘러싸고 있는 박스나 플로트가 지정된 다른 박스의 왼쪽이나 오른쪽 끝면에 닿도록 이동시킬 수 있습니다.

라인박스와 플로트 해제방법

라인박스가 플로트된 박스 옆으로 흐르지 않도록 하려면 clear를 적용해서 플로트를 해제해야 합니다.

clear 속성에 들어갈 수 있는 값으로는 left, right, both, none이 있어서 박스의 어느쪽에서 이어서 표시되지 않도록 지정할 수 있습니다.

문단 왼쪽에 그림 하나를 플로트로 띄우고 싶다면 다음과 같은 코드를 작성할 수 있습니다.

위와 같이 별로의 엘리먼트를 추가하여 플로트를 해제하는 방법이 있는가 가면 CSS를 이용한 방법도 있습니다.

:after라는 유사 클래스와 content라는 속성을 활용하며 엘리먼트의 내용 끝 부분에 새로운 내용을 추가할수도 있습니다.

.news:after{content:"."; height:0; visibility:block; clear:both; }