CSS 레이아웃 - clear and clearfix
클리어 속성
속성 을 사용하고 float아래의 다음 요소(오른쪽 또는 왼쪽이 아님)를 원할 때 clear
속성을 사용해야 합니다.
이 clear속성은 부동 요소 옆에 있는 요소에 어떤 일이 발생해야 하는지 지정합니다.
속성 은 clear다음 값 중 하나를 가질 수 있습니다.
-
none- 요소는 왼쪽 또는 오른쪽 부동 요소 아래로 푸시되지 않습니다. 이것은 기본값입니다 -
left- 요소가 왼쪽 부동 요소 아래로 푸시됩니다. -
right- 요소가 오른쪽 부동 요소 아래로 푸시됩니다. -
both- 요소는 왼쪽 및 오른쪽 부동 요소 아래로 푸시됩니다. -
inherit- 요소는 부모로부터 명확한 값을 상속합니다.
float를 지울 때 float와 clear를 일치시켜야 합니다. 요소가 왼쪽으로 떠 있으면 왼쪽으로 지워야 합니다. 떠 있는 요소는 계속 떠 있지만 지워진 요소는 웹 페이지에서 그 아래에 나타납니다.
예시
이 예제는 왼쪽의 float를 지웁니다. 여기에서 <div2> 요소가 왼쪽 부동 <div1> 요소 아래로 푸시되었음을 의미합니다.
div1 {
float: left;
}
div2 {
clear: left;
}
클리어픽스 해킹
부동 요소가 포함하는 요소보다 키가 크면 컨테이너 외부에서 "오버플로"됩니다. 그런 다음 이 문제를 해결하기 위해 clearfix 핵을 추가할 수 있습니다.
Clearfix 없이
클리어픽스와 함께
예시
.clearfix {
overflow: auto;
}
The overflow: auto clearfix works well as long as you are able to keep control of your margins and padding (else you
might see scrollbars). The
new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
You will learn more about the ::after pseudo-element in a later chapter.