CSS Clearfix 해킹을 사용하는 시기와 방법

CSS Flexbox 및 CSS Grid 세대의 코더 및 프로그래머로서 우리는 CSS Clearfix를 자주 고려하지 않습니다. CSS Flexbox와 Grid는 float를 사용하는 것보다 요소의 위치를 조금 더 잘(좀 더 쉽게!) 해결합니다.

그럼에도 불구하고 float를 사용하는 레거시 코드로 작업하고 코드베이스를 보다 현대적으로 처리하도록 전환할 시간이나 돈이 없는 소수의 경우에 대해 우리 모두는 여전히 이것을 알고 있어야 합니다.

이 기사에서 우리는 clearfix 핵을 탐구하고 clearfix 솔루션의 새로운 대안으로서 display:flow-root에 대해 논의할 것입니다.

플로트란 무엇입니까?

참고로 플로트 속성은 기본적으로 부동하려는 요소를 가져와 컨테이너의 왼쪽 또는 오른쪽에 배치합니다.

<!DOCTYPE html>
<html lang="en>
<head>
	<title>CSS Clearfix</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
body {
  background-color: grey;
}

ul {
  max-width: 800px;
  width: 100%;
  background: lightblue;
  border: 5px double black;
  padding: 20px;
}

img {
  width: 300px;
  margin: 20px;
}

li {
  list-style: none;
  float: left;
}

</style>
</head>
<body>
<!-- https://unsplash.com/photos/2PPjq7I3bs4 -->
<ul>
  <li>
    <img src="https://images.unsplash.com/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" />     </li>
<!--  https://unsplash.com/photos/vYhBeZ_G_xE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" />     </li>
<!--  https://unsplash.com/photos/7UduWMpT618  -->
  <li>
    <img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" />     </li>
<!--  https://unsplash.com/photos/Ah_QC2v2alE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" />     
  </li>
<!--  https://unsplash.com/photos/T-0EW-SEbsE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />     </li>
</ul>
<p>Here is a sample paragraph element. Something is wrong about where I am in the layout. What else is wrong with the layout?</p>
</body>
</html>

현재 <ul>에 있어야 하는 이미지가 몇 개 있습니다. , 연한 파란색 배경을 가진 컨테이너이지만 해당 이미지가 <ul>의 다른 요소보다 큽니다. . 결과적으로 float 및 축소된 수평 여백을 지우지 않는 오버플로가 발생합니다.

이것이 하늘색 컨테이너가 너무 짧은 이유, float가 있는 위치에 배치되는 이유, float 요소와 나란히 단락 요소가 있는 이유입니다. 이것은 부모 컨테이너보다 키가 큰 자식 요소와 함께 float를 사용할 때의 기본값입니다.

수정

첫 번째 가능한 해결책은 clearfix 핵이라고 하는 것입니다. . 이 해킹은 상위 컨테이너 뒤에 일부 빈 콘텐츠를 삽입하여 부유 요소를 포함하도록 확장됩니다. 우리는 이것을 달성하기 위해 의사 요소 ::after를 사용할 것입니다:

<!DOCTYPE html>
<html lang="en>
<head>
	<title>CSS Clearfix</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
body {
  background-color: grey;
}

ul {
  max-width: 800px;
  width: 100%;
  background: lightblue;
  border: 5px double black;
  padding: 20px;
}

img {
  width: 300px;
}

li {
  list-style: none;
  float: left;
  margin: 20px;
}

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

</style>
</head>
<body>
<!-- https://unsplash.com/photos/2PPjq7I3bs4 -->
<ul>
  <li>
    <img src="https://images.unsplash.com/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" />     </li>
<!--  https://unsplash.com/photos/vYhBeZ_G_xE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" />     </li>
<!--  https://unsplash.com/photos/7UduWMpT618  -->
  <li>
    <img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" />     </li>
<!--  https://unsplash.com/photos/Ah_QC2v2alE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" />     
  </li>
<!--  https://unsplash.com/photos/T-0EW-SEbsE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />     </li>
</ul>
<p>Here is a sample paragraph element. Something is wrong about where I am in the layout. What else is wrong with the layout?</p>
</body>
</html>

약간의 여백을 제외하고 <li> 간격을 더 좋게 만들기 위해 .clearfix-hack::after 만 추가되었습니다. 선택자. 콘텐츠, 표시 및 지우기의 세 가지 속성이 필요합니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

빈 문자열이 콘텐츠 속성의 값을 차지하므로 요소의 테두리를 both 끝 아래로 이동합니다. clear 속성에 float 유형이 있고 디스플레이를 block으로 설정하고 있습니다. 또는 table 페이지에 데이터/이미지를 표시합니다.

결과적으로 컨테이너 내부의 이미지와 그 아래의

태그가 허용 가능하게 표시됩니다.

Clearfix의 끝인가요?

Flexbox와 Grid의 등장으로 clearfix의 필요성이 사라지고 있습니다. CSS에서 clearfix를 처리하는 새로운 방법을 사용하면 더욱 그렇습니다.

.clearfix-hack {
	display: flow-root
}

.clearfix-hack::after 교체 위의 코드로 선택기. 변화가 있나요?
display: flow-root 우리를 위해 clearfix 해킹을 수행하고 우리의 코드를 더 읽기 쉽게 만듭니다.

결론

float 속성을 자식 요소에 추가할 때 생성되는 버그를 수정하는 두 가지 방법인 clearfix 핵과 display: flow-root 사용에 대해 논의했습니다. . Flexbox 및 Grid의 생성으로 인해 실제로 처음부터 생성하는 코드가 아니라 레거시 코드에서만 이러한 해킹을 사용할 가능성이 높습니다.