[CSS] float과 clear:both 속성
float 속성
기본형: float: left l right l none
left -> 해당 요소를 문서의 왼쪽에 배치한다.
right -> 해당 요소를 문서의 오른쪽에 배치한다.
none -> 좌우 어느쪽으로도 배치하지 않는다.
float을 사용하면 아래의 이미지와 같이 float 속성이 적용된 요소의 그 주변을 다른 요소가 감싸게 된다.
clear 속성(float 속성 해제하기)
float 속성을 사용하면 float 속성을 적용한 요소 다음에 오는 요소들에도 속성이 전달된다.
따라서 float 속성이 적용된 컨텐츠 다음에 오는 컨텐츠들이 감싸는것을 원치 않으면 clear 속성을 사용해서 속성이 적용되지 않도록 할 수 있다.
float: left; 였다면 clear:left; 사용하여 무력화
float: right; 였다면 clear:right; 사용하여 무력화
위처럼 사용하면 float 속성을 무효화 시킬 수 있다.
이외에도 float 속성 값과 상관없이 무조건 기본상태로 되돌리고 싶다면 clear: both; 속성을 사용하면 된다.
예시)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>float & clear</title>
<style>
div {
padding: 20px;
margin: 10px;
}
.box1 {
background: #ffd800;
float: left;
}
.box2 {
background: #0094ff;
float: left;
}
.box3 {
background: #00ff21;
}
.box4 {
background: #a874ff;
clear: both;
}
</style>
</head>
<body>
<div class="box1">1번 - float: left;</div>
<div class="box2">2번 - float: left;</div>
<div class="box3">3번 - 속성 아무것도 없음(미적용)</div>
<div class="box4">4번 - clear: both;</div>
</body>
</html>
3번 과같이 속성을 아무것도 적용하지 않으면 앞에서 float 속성을 적용한 요소로 인해 겹침이 발생한다.
만약 겹침을 없애고 싶다면 clear: left; 또는 clear:both; 속성을 사용하면 4번과 같이 겹침없이 화면에 출력이 가능하다.
댓글
댓글 쓰기