[CSS] 수평 레이아웃 구성

[float + clear 속성으로 수평 레이아웃 구성하기]

먼저 수평으로 배치되어야 할 요소들에게 float:left 를 줍니다. 만약 특정 요소만 오른쪽에 고정되어야 한다면 right를 줄 수도 있습니다. 그리고 이들을 감싸는 컨테이너<div>를 하나 만들고, :after 가상 선택자에서 clear를 하도록 하면 됩니다.

 

[예시]

[결과]

아래와 같이 작성을 하게 되면 복잡한 형태의 레이아웃도 만들 수 있습니다. main이 수평 컨테이너 역할을 하는 것과 같습니다.

 

[예시]

[결과]

[종합]

컨테이너는 고유하지 않습니다. 컨테이너 안에 다른 컨테이너가 들어갈 수도 있고, 컨테이너가 수직으로 여러 개 배치될 수도 있습니다. 

 

[예시]

[결과]