How To – 클리어 플로트(Clearfix)

w3.css

클리어 플로트(Clearfix)

“clearfix” 해킹으로 부유물을 제거하는 방법을 알아보자.

플로트를 제거하는 방법 (Clearfix)

떠 있는 요소 뒤의 요소는 그 주위로 흐른다. “clearfix” 해킹을 사용하여 문제를 해결하자.

클리어픽스 없이	클리어픽스로

clearfix 해킹

요소가 그것을 포함하는 요소보다 높고 떠 있는 경우 컨테이너 밖으로 넘쳐흐른다.

그런 다음 포함 요소에 overflow: auto; 를 추가하여 이 문제를 해결할 수 있다.

1단계) HTML 추가

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

1단계) CSS 추가

.clearfix {
  overflow: auto;
}

overflow:auto clearfix는 여백과 패딩을 제어할 수 있는 한 잘 작동한다(그렇지 않으면 스크롤바가 보일 수 있음). 그러나 새롭고 현대적인 clearfix 해킹은 사용하기 더 안전하며 다음 코드는 대부분의 웹페이지에 사용된다.

예제

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}