CSS float 속성이란?
CSS의 float 속성을 사용하면 요소를 부모(컨테이닝) 요소 기준으로 왼쪽(left) 또는 오른쪽(right) 방향으로 띄울 수 있습니다. float가 적용된 요소는 일반적인 문서 흐름에서 벗어나 배치되며, 나머지 요소들은 띄워진 콘텐츠 주위로 자연스럽게 정렬됩니다.
또한 동일한 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 값이 적용된 요소들이 인접하여 정렬되는 것을 확인할 수 있습니다.
'float-->right' 버튼을 클릭한 경우
색상 블록이 오른쪽 영역으로 옮겨져 오른쪽부터 쌓이듯 배치됩니다.
정리
float 속성은 요소를 문서 흐름에서 분리해 부모 컨테이너의 좌우 어느 쪽으로든 배치할 수 있는 강력한 도구입니다. 다만 최신 웹 개발에서는 복잡한 레이아웃 구성 시 Flexbox나 Grid를 함께 활용하는 것이 좋으며, float는 텍스트와 이미지를 감싸는 형태의 배치에 주로 사용하는 것이 권장됩니다.