HTML에서 플로팅(floating) 레이아웃을 만들려면 CSS의 float 속성을 사용합니다. 웹사이트는 여러 개의 열(column)로 콘텐츠를 배치하는 경우가 많은데, CSS Float는 이러한 멀티 컬럼 레이아웃을 구현하는 대표적인 방법 중 하나입니다.
플로팅 레이아웃이란?
플로팅 레이아웃은 웹사이트 전체 구조를 잡을 때 널리 사용되는 기법으로, 요소를 왼쪽(float: left) 또는 오른쪽(float: right)으로 띄워 나머지 콘텐츠가 그 주변으로 흐르도록 배치하는 방식입니다. 예를 들어 왼쪽에는 내비게이션 메뉴를, 오른쪽에는 본문 콘텐츠를 배치하는 2단 레이아웃을 손쉽게 만들 수 있습니다.
아래 이미지처럼 헤더(header), 내비게이션(nav), 본문(article), 푸터(footer)로 구성된 클래식한 웹페이지 레이아웃을 플로팅 기법으로 간단하게 구현할 수 있습니다.
예제 코드
다음 코드를 실행하면 위와 같은 플로팅 레이아웃을 직접 확인할 수 있습니다. 핵심은 nav 요소에 float: left를 적용하고, 본문인 article에 overflow: hidden을 지정해 플로트된 요소의 영향을 받지 않도록 처리한 점입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div.mycontent {
width: 100%;
border: 1px solid green;
}
header, footer {
padding: 1em;
color: green;
background-color: #FAFAFA;
text-align: left;
}
nav {
float: left;
max-width: 150px;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
margin-left: 10px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="mycontent">
<header>
<h1>Tutorialspoint.com</h1>
<h3>Simply Easy Learning</h3>
</header>
<nav>
<ul>
<li><a href="/tutorialslibrary.htm">Tutorials Library</a></li>
<li><a href="/videotutorials/index.htm">Video Tutorials</a></li>
<li><a href="/codingground.htm">Coding Ground</a></li>
<li><a href="/tutor_connect/index.php">Tutor Connect</a></li>
<li><a href="/online_dev_tools.htm">Tools</a></li>
</ul>
</nav>
<article>
<h1>About Us</h1>
<p>This is demo content.</p>
<p>This is demo content.</p>
<p>This is demo content.</p>
<p>This is demo content.</p>
</article>
<footer>Add the footer content here</footer>
</div>
</body>
</html>코드 핵심 포인트
- nav { float: left; } – 내비게이션 영역을 왼쪽으로 띄워 본문과 나란히 배치합니다.
- max-width: 150px; – 메뉴 영역의 최대 너비를 제한해 레이아웃이 무너지지 않도록 합니다.
- article { overflow: hidden; } – 플로트된 요소 아래로 본문이 겹치는 현상을 방지하며, 부모 컨테이너의 높이 계산에도 도움을 줍니다.
- border-left – 메뉴와 본문 사이에 시각적인 구분선을 추가해 가독성을 높입니다.
참고: float 사용 시 주의사항
플로팅 요소를 사용하면 부모 요소의 높이가 0으로 계산되는 문제가 발생할 수 있습니다. 이 경우 clear: both 속성을 가진 요소를 마지막에 추가하거나, 부모에 overflow: hidden 또는 display: flow-root를 적용해 해결할 수 있습니다. 참고로 최신 프로젝트에서는 Flexbox나 Grid 레이아웃이 더 권장되지만, 레거시 코드 유지보수나 간단한 배치에는 여전히 float가 유용하게 활용됩니다.