CSS float 속성으로 요소를 왼쪽·오른쪽 정렬하는 방법

CSS의 float 속성은 박스나 콘텐츠의 위치를 지정하거나 서식을 구성하는 데 사용되는 대표적인 속성입니다. 이 속성을 활용하면 HTML 요소를 화면의 왼쪽 또는 오른쪽으로 배치(정렬)할 수 있습니다.

float는 본래 텍스트 사이에 이미지를 자연스럽게 배치하기 위해 도입되었지만, 요소를 좌우로 나란히 정렬하는 용도로도 널리 사용됩니다. 아래 예제를 통해 실제 동작 방식을 살펴보겠습니다.

예제 1: float로 좌우 정렬하기

다음은 CSS float 속성을 사용하여 요소를 정렬하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS Float를 이용한 정렬</title>
<style>
.screen {
    padding: 10px;
    width: 70%;
    margin: 0 auto;
    background-color: #f06d06;
    text-align: center;
    color: white;
    border-radius: 0 0 50px 50px;
    border: 4px solid #000;
}
.backSeats div {
    margin: 10px;
    padding: 10px;
    color: white;
    border: 4px solid #000;
}
.backSeats div {
    background-color: #4CAF50;
}
.leftFloat {
    float: left;
}
.rightFloat {
    float: right;
}
</style></head>
<body>
<div class="screen">Screen</div>
<div class="backSeats">
<div class="leftFloat">Premium Left Seat 1</div>
<div class="leftFloat">Premium Left Seat 2</div>
<div class="rightFloat">Premium Right Seat 1</div>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS float 속성으로 요소를 왼쪽·오른쪽 정렬하는 방법

왼쪽으로 흐르는(float: left) 요소들은 순서대로 왼쪽에 배치되고, 오른쪽으로 흐르는(float: right) 요소는 오른쪽 끝에 배치되는 것을 확인할 수 있습니다.

예제 2: float 해제(clear) 활용하기

이번에는 float 속성과 함께 clear 속성을 사용하여 흐름을 제어하는 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS Float를 이용한 정렬</title>
<style type="text/css">
p {
    float: left;
    margin: 10px;
    padding: 10px;
    color: white;
    background-color: #48C9B0;
    border: 4px solid #145A32;
}
p.noneFloat {
    float: none;
    clear: both;
    color: #34495E;
}
</style></head>
<body>
<p>I love Java.</p>
<p class="noneFloat">I think C# is better.</p>
<p>Even C isn't a bad choice.</p>
<p>I agree!</p>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS float 속성으로 요소를 왼쪽·오른쪽 정렬하는 방법

float: none과 clear: both가 적용된 문단은 좌우 정렬 흐름에서 벗어나 새로운 줄에서 독립적으로 표시됩니다. 즉, 앞선 float 요소들의 영향을 받지 않고 아래쪽에 배치됩니다.

정리

float: left — 요소를 컨테이너의 왼쪽에 배치합니다.
float: right — 요소를 컨테이너의 오른쪽에 배치합니다.
float: none — 기본값으로, 요소가 float되지 않습니다.
clear: both — 앞서 지정된 float의 영향을 받지 않고 새 줄에서 시작합니다.

참고로, 최신 웹 개발에서는 전체 레이아웃 구성 시 Flexbox나 Grid 같은 모던 레이아웃 기법이 권장되며, float는 텍스트와 이미지를 함께 배치하는 등의 특수한 경우에 주로 사용됩니다.