과거에는 많은 웹 사이트에서 HTML 표를 사용하여 페이지를 레이아웃했습니다.이 방법은 이전 웹 브라우저에서 일관되게 안정적인 결과를 산출했기 때문입니다. 이것은 테이블이 실제로 페이지 레이아웃이 아닌 테이블 형식의 데이터를 표시하기위한 것이므로 이상적인 솔루션은 아닙니다. 테이블을 사용한다는 것은 레이아웃이 페이지에 하드 코딩되어 사이트를 업데이트하는 데 더 많은 시간이 소요된다는 것을 의미했습니다. Cascading Style Sheets는 "float"속성을 도입하여 디자이너가 요소를 왼쪽이나 오른쪽으로 유동시킬 수 있습니다. 이렇게하면 페이지를보다 잘 제어 할 수 있으며 사이트 레이아웃을 콘텐츠와 별도로 유지할 수 있다는 이점이 있습니다.

1.

텍스트 편집기 또는 HTML 편집기를 열고 새 HTML 문서를 작성하십시오.

2.

페이지 본문에 다음 코드를 추가합니다.

페이지를 저장하고 웹 브라우저에서여십시오. 두 번째 div의 내용이 첫 번째 div의 내용 아래에 표시됩니다.

삼.

다음 CSS 코드를 HTML 문서의 섹션에 삽입하십시오.

페이지를 저장하고 브라우저에서 새로 고침하여 변경 사항을 표시하십시오. CSS 규칙은 "myContainer"div 내에 중첩 된 두 div를 모두 대상으로합니다. "float"속성은 div에 왼쪽으로 플로트하도록 브라우저에 지시합니다. div를 오른쪽 div에 놓으려면 float 값을 "right"로 변경할 수 있습니다. div는 300 픽셀의 고정 너비로 ​​설정되고 레이아웃을 더 쉽게 볼 수 있도록 1 픽셀 검정 테두리가 있습니다. 브라우저에서 상자가 나란히 표시됩니다.

4.

아래에 표시된 것처럼 "myContainer"div 외부의 페이지 본문에 세 번째 div를 추가합니다.

페이지를 저장하고 브라우저에 다시로드하십시오. 첫 번째와 두 번째 div 옆에 세 번째 div가 표시되는 것을 볼 수 있습니다. 이는 나머지 HTML 요소가 부유 요소 주위로 흐르기 때문에 발생합니다. 어떤 경우에는 바람직한 동작이 될 수 있지만, 이 예에서는 세 번째 div가 float div 아래에 표시되어 바닥 글이 작성되기를 원합니다.

5.

페이지 헤드의 스타일 섹션에 다음 규칙을 삽입하십시오.

myFooter {

clear: both; 

}

이것은 세 번째 "myFooter"div를 대상으로하며 브라우저에 float를 중단하고 "myContainer"div 아래의 후속 HTML 요소를 표시하도록 지시합니다. 페이지를 저장하고 새로 고침하십시오. 이제 세 번째 div로 구성된 바닥 글이 떠 다니는 div 아래에 표시됩니다.

팁

• CSS "margin"속성을 사용하여 부동 div 사이에 공백을 만들 수 있습니다.