CSS float 겹침 문제 해결 - clear:both; 정렬 초기화 (겹침 초기화 꼼수)
페이지 정보
조회 564회 작성일 22-06-06 16:00
본문
float 겹침 문제 해결
clear:both; 정렬 초기화
float 속성을 사용한 후 div 겹침이 일어나서 황당한 경우가 종종 있다.
물론, 이를 해결하기 위한 정석적인 방법들도 있지만, 아주 간단하게 float 겹침 문제를 해결하는 꼼수도 알아두면 쓸만 하다.
float 겹침 문제 해결 - clear:both; 정렬 초기화 (겹침 초기화 꼼수)
float 초기화가 필요한 이유
가장 자주 일어나는 경우는 아래와 같은 경우가 되겠다.
[code]
<style>
.div1 { float:left; }
.div2 { float:right; }
.div3 { float:none; }
</style>
[/code]
위의 CSS 코드를 설명하자면, div1를 왼쪽으로, div2를 오른쪽으로 붙여 정렬한 것이다.
그런데 문제는 그 후 div3는 일반 정렬을 하고 싶은데, float 겹침이 일어나며 위의 다른 div와 겹쳐버리는 것이다.
그 원인은 div3에 float:none를 적용했음에도 불구하고, 그 위에서 사용한 float:left 같은 속성의 영향을 받기 때문이다.
float 겹침 초기화 해결 꼼수
이럴 때 꼼수로 간단하게 해결하고 넘어가야 한다면, 빈 div를 이용한 clear:both를 이용해 볼 수 있다.
물론, 코드가 깨끗하지는 않다. 아무 필요도 없는 요소가 생기기 때문이다.
그러나 꼼꼼하게 확인할 시간이 없어서 급하게 해결해버려야 한다면?
그때 필요한 것이 clear:both가 들어 있는 빈 div다.
먼저 HTML의 구조가 다음과 같다고 하자.
[code]
<div class="div1">내용</div>
<div class="div2">내용</div>
<div class="div3">내용</div>
[/code]
여기서 문제가 되는 div3의 바로 위에 빈 div를 하나 넣고 스타일을 정해 보자.
[code]
<div class="div1">내용</div>
<div class="div2">내용</div>
<div class="emptydiv" style="clear:both;"></div>
<div class="div3">내용</div>
[/code]
이때 clear:both;의 뜻은 "앞에서 정한 속성을 지워버려라"는 뜻이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
CSS 파일에서 clear:both; 정렬 초기화를 하려면
위에서는 HTML에 바로 style="clear:both;"를 넣었지만, CSS 파일에서 조정하고 싶다면 아래처럼 한다.
[code]
.emptydiv { clear:both; }
[/code]
물론 이렇게 했으면 HTML에 있는 코드는 지워버려도 된다.