[CSS 기초] float를 clear하는 방법들 (::after, overflow, clear)

 

저번에는 float에 대해 정리했는데,

 

https://jwss.tistory.com/13

[CSS 기초] 엘리먼트 배치: float + clear: both, overflow: hidden

 

이 float은 사전적의미로 '뜨다', '띄우다' 등의 의미를 갖고있고 float을 적용한 요소는 일반적인 흐름에서 벗어나는 특징이 있어 다음의 요소에게 영향을 미치기 때문에 clear와 반드시 함께 사용해야한다.

오늘은 clear를 하는 방법들에 대해 알아보자.

 

float를 clear 하는 방법

1. 가상 요소 ::after 사용 (권장)
2. overflow 속성 사용
3. 빈 엘리먼트에  clear 속성 사용

 

1. 가상 요소 ::after 사용 (권장)

가상요소(Pseudo-elements) 란?

가상요소는 가상의 요소를 만들고 내용을 넣어 출력하겠다는 것으로, 

::after, ::before을 주로 볼 수 있다.

 

가상요소(Pseudo-elements)를 사용하는 방법

float된 요소의 부모요소에 가상요소를 만들고 해당요소에 clear 코드를 지정한다.

 

일일히 clear할 가상요소를 만드는 것이 번거로우니 아예 clearfix라는 클래스를 따로 만들어 가상요소를 만들고

그 클래스를 float된 요소의 부모요소에 주는 방법을 주로 이용한다.

 

float된 요소의 부모요소::after {
	content: '';
	display: block;
	clear: both;
}

 

content: ' ' , display: block 

: 뒤에 내용이 빈 블럭요소를 만들겠다는 뜻.

 

clear: both 

: folat이 적용된 요소 다음으로 나타나는 요소들이  더 이상 float의 영향을 받지 않도록 설정한다. 

clear: left는 float: left를, clear: right는 float: right의 영향을 받지않겠다는 뜻으로 방향을 신경쓰고 싶지 않다면 clear: both로 양쪽 방향을 전부 clear 해준다.

 

<예시>

파란색 박스부분은 원래 밑에 위치 해야하나 제목과 목록에 float을 줘서 밀고 올라온 경우에 clearfix를 적용해보겠습니다.

 

See the Pen clear: both by k (@kjwboa) on CodePen.

 

 

2. overflow 속성 사용

float 속성을 가진 요소의 부모 요소에 overflow: hidden 또는 overflow: auto를 적용시킨다.

 

See the Pen overflow:hidden by k (@kjwboa) on CodePen.

 

 

 

overflow: auto

: 자식 요소의 너비가 부모 요소의 너비보다 크면 가로 스크롤바가 생기기 때문에 사용에 주의해야한다.

 

overflow: hidden

: overflow: auto 처럼 가로 스크롤이 생기지는 않지만 자식 요소의 너비가 부모 요소의 너비보다 크면 넘치는 부분이 잘리기 때문에 주의해야한다.

 

 

3. 빈 엘리먼트에 clear 속성 사용

1번과 비슷한 개념이지만 위에서는 가상요소를 사용했고 이 방법은 빈 태그를 만들어 아래의 코드를 적용한다.

높이가 0인 보이지 않는 태그를 만들어 float를 해제하는 방법인데,

의미없는 태그를 만들어 사용하는 것이므로 사용하지 않는 것을 권장한다.

 

빈태그 {
	clear: both;
    height: 0;
    overflow: hidden;
}