![[CSS 기초] 엘리먼트 배치: float + clear: both, overflow: hidden](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmKa0S%2Fbtrj3WSsHav%2FhKV1sqfQUc5IijWxzoDHG1%2Fimg.png)
오늘은 엘리먼트를 배치하는 속성 중 하나인 float에 대해 알아보자.
float 이란
CSS 속성 float은 '띄우다'라는 뜻으로, 한 요소를 일반적인 레이아웃의 흐름으로부터 띄워 수평 정렬 할 때 사용한다.
float 속성은 이미지와 텍스트를 함께 배치할 때 사용하며, 요소가 부모요소 기준으로 왼쪽 또는 오른쪽에 배치된다.
과거에는 전체 레이아웃을 배치할 때도 float을 사용했으나
모던 웹에는 flexbox라는 속성이 있고 float은 레이아웃 배치를 위해 설계된 속성이 아니므로 사용에 주의해야한다.
float 속성 값
- left : 왼쪽 배치
- right : 오른쪽 배치
- none : float 없음
float 사용 예시
<html lang="ko">
<head>
<title>float 배치</title>
<style>
.container1 {
border: 1px solid;
}
.container1 img {
width: 300px;
float: left;
}
</style>
</head>
<body>
<div class="container1">
<img src="img/cat.jpg">
<p>
It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is
that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many desktop
publishing packages and web page editors now use Lorem Ipsum as their default model
text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
</body>
</html>결과
float을 사용할 때 clear: both, overflow: hidden을 사용하는 이유
clear: both;
float는 속성이 상속되어 float 속성을 사용한 요소의 다음 요소에게 영향을 미친다.
다음 요소가 이전 요소를 밀고 올라오게 되는데 clear: both를 주면 이러한 현상을 막을 수 있다.
overflow: hidden;
float 속성을 준 요소의 부모 요소는 높이 값을 잃어 자식요쇼들을 품지 못한다.
overflow 속성을 주어 높이 값을 되찾게 해 떠있는 요소들을 품도록 한다.
값은 visible만 아니면 무엇이든 상관없다.
예시
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>float 배치</title>
<style>
.box_wrap {
width: 360px;
margin: 0 auto;
}
.box_parent {
background-color: navajowhite;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
color: white;
text-align: center;
}
.box1 {
background-color: crimson;
float: left;
}
.box2 {
background-color: cornflowerblue;
float: right;
}
</style>
</head>
<body>
<div class="box_wrap">
<div class="box_parent">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</div>
</div>
</body>
</html>
box1과 box2에 float를 줬을 때 부모요소인 box_parent가 box1과 box2를 품지 못하고 자신에게 준 padding 값만을 높이로 가진 것을 볼 수 있다.
이 때, overflow: hidden을 부모 요소에 입력하게 되면
.box_parent {
background-color: navajowhite;
padding: 20px;
overflow: hidden;
}
부모요소가 box1, box2를 품게 됩니다.
이것이 overflow: hidden을 사용하는 이유이다.
이제 clear: both를 쓰는 이유를 알아보자. box1, box2 다음에 box3을 추가 해준다.
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>float 배치</title>
<style>
.box_wrap {
width: 360px;
margin: 0 auto;
}
.box_parent {
background-color: navajowhite;
padding: 20px;
overflow: hidden;
}
.box {
width: 100px;
height: 100px;
color: white;
text-align: center;
}
.box1 {
background-color: crimson;
float: left;
}
.box2 {
background-color: cornflowerblue;
float: right;
}
.box3 {
background-color: salmon;
width: 340px;
}
</style>
</head>
<body>
<div class="box_wrap">
<div class="box_parent">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</div>
</body>
</html>
box1, box2의 다음 요소인 box3이 밀고 올라온 것을 볼 수 있습니다.
이는 float이 다음 요소에게 상속되기 때문입니다.
이 때, box3에 clear: both를 입력해주면
.box3 {
background-color: salmon;
width: 340px;
clear: both;
}
box3에 상속된 float이 해제되어 밀고 올라오지 않는 것을 확인할 수 있습니다.