CSS : float & clear
float
- float 속성은 일반적인 요소의 흐름과 달리 둥둥 떠있는 것처럼 단독적으로 브라우저의 오른쪽과 왼쪽에 위치한다.
일반적인 문서의 흐름 예시
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#aaa {
width: 100px;
height: 50px;
background-color: red;
}
#bbb {
width: 100px;
height: 100px;
background-color: orange;
}
#ccc {
width: 100px;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="aaa">aaa</div>
<div id="bbb">bbb</div>
<div id="ccc">ccc</div>
<p>안녕하세요</p>
</body>
</html>
- div와 p 태그로 요소를 만들었을 때 위에서 아래로 순차적으로 만들어진 것을 볼 수 있다.
- aaa, bbb, ccc, p태그 순으로 되어있다.
float 예시
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#aaa {
width: 100px;
height: 50px;
background-color: red;
float: right;
}
#bbb {
width: 100px;
height: 100px;
background-color: orange;
float: right;
}
#ccc {
width: 100px;
height: 50px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div id="aaa">aaa</div>
<div id="bbb">bbb</div>
<div id="ccc">ccc</div>
<p>안녕하세요</p>
</body>
</html>
- aaa와 bbb에 float : right를 주니 aaa가 오른쪽에 고정된 것을 볼 수 있다.
- ccc에 float : left를 주니 p태그 와 같은 선상에 놓여있는 것을 볼 수 있다.
- float를 지정한 요소는 문서의 흐름에서 벗어나 자기가 필요한 만큼의 자리를 차지했기 때문에 float에 영향을 받지 않은 p태그가 맨 위로 올려지게 된다.
- float를 부여한 div가 body의 양쪽 끝에 붙어있기 때문에, 브라우저의 크기가 늘어나거나 줄어들 경우 해당 사이즈에 맞게 움직이며, 가장 최소로 줄일 경우 문서의 흐름에서 아예 벗어나는 것을 볼 수 있다.
- aaa, bbb 그리고 ccc는 문서의 흐름에 벗어나 있지만 p태그를 준 '안녕하세요'는 흐름에 맞게 나타나는 것을 볼 수 있다.
- float 속성을 이용하여 요소를 브라우저의 양쪽에 위치하게 할 수 있지만, 그 이후에 오는 요소는 제자리를 못 잡고 엉뚱한 위치에 있는 것을 볼 수 있다.
clear
- clear 속성은 float가 적용되어있는 요소 이후에 올 요소가 float에 영향을 받지 않고, 문서의 흐름대로 float요소의 아래로 내려가게 한다.
- clear both를 사용하면 float요소 이후에 올 요소들의 float 영향을 깔끔하게 제거할수있다.
clear 예시
p {
clear: right;
}
- clear: right를 주면 float: right가 적용된 요소의 아래에 위치한다.
- right 값을 주었다고 해서 해당 요소가 right로 가는게 아니라 float: right값이 주어진 요소의 마지막 위치부터 시작이다.