CSS의 float(부동) 속성은 박스나 콘텐츠를 배치하고 서식을 지정할 때 사용하는 대표적인 위치 지정 도구입니다. 이 속성을 활용하면 요소를 컨테이너의 왼쪽 또는 오른쪽으로 띄워 배치할 수 있으며, 이미지 주변으로 텍스트가 흐르게 만드는 등 다양한 레이아웃 구성에 활용됩니다.
float 속성의 주요 값
float 속성에는 다음 네 가지 값을 지정할 수 있습니다.
- left − 요소가 컨테이너의 왼쪽으로 떠다닙니다.
- right − 요소가 컨테이너의 오른쪽으로 떠다닙니다.
- none − 요소가 떠다니지 않습니다. (기본값)
- inherit − 부모 요소의 float 값을 그대로 상속받습니다.
예제
다음은 CSS float 속성을 실제로 적용한 예제입니다. 버튼을 클릭하면 색상 블록이 하나씩 왼쪽 또는 오른쪽 영역으로 이동하면서 float가 적용되는 과정을 눈으로 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS Float</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
#container {
display: flex;
flex-direction: column-reverse;
justify-content: center;
align-items: center;
}
.child{
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.orange{
background-color: #FF8A00;
}
.red{
background-color: #F44336;
}
.violet{
background-color: #C303C3;
}
.green{
background-color: #4CAF50;
}
.blue{
background-color: #03A9F4;
}
.yellow{
background-color: #FEDC11;
}
#left{
display: flex;
float: left;
}
#right{
display: flex;
float: right;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Float</legend>
<div id="container">
<div class="child orange"></div><div class="child red"></div><div class="child violet"></div><div class="child green"></div><div class="child blue"></div><div class="child yellow"></div>
</div><br>
<input type="button" value="float-->left" onclick="floatDecider('left')">
<input type="button" value="float-->right" onclick="floatDecider('right')">
<div><div id="left"></div><div id="right"></div></div>
</fieldset>
</form>
<script>
var left = document.getElementById('left');
var right = document.getElementById('right');
function floatDecider(direction){
var allChildren = document.getElementsByClassName('child');
if(direction === 'left')
left.insertAdjacentElement('beforeend',allChildren[0]);
else
right.insertAdjacentElement('afterbegin',allChildren[0]);
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 화면에 나타납니다.
버튼을 클릭하기 전 − 여섯 개의 색상 블록이 세로 방향으로 정렬되어 표시됩니다.
‘float-->left’ 버튼을 4번 클릭한 후 − 앞쪽 네 개의 블록이 차례대로 왼쪽으로 띄워져 가로 방향으로 배치됩니다.
‘float-->right’ 버튼을 클릭한 후 − 남은 블록들이 오른쪽으로 띄워져 배치되는 것을 확인할 수 있습니다.
참고: float 사용 시 유의할 점
float가 적용된 요소는 일반 문서 흐름에서 벗어나기 때문에, 부모 요소의 높이가 무너지는 현상이 발생할 수 있습니다. 이때는 clear 속성이나 clearfix 기법을 활용해 레이아웃을 정리해 주어야 합니다.
또한 float는 원래 텍스트와 이미지를 함께 배치하기 위한 목적으로 만들어진 속성입니다. 과거에는 전체 페이지 레이아웃을 잡는 데 널리 사용되었지만, 최근에는 Flexbox나 CSS Grid처럼 더 강력하고 직관적인 레이아웃 기법이 표준화되어 복잡한 배치 작업에는 이들을 사용하는 것이 권장됩니다. float는 여전히 이미지 주변으로 텍스트가 자연스럽게 흐르도록 만드는 용도로 유용하게 활용할 수 있습니다.