Clearfix는 CSS에서 부동 소수점을 지우는 데 자주 사용됩니다. 저자는 비교를 위해 Clearfix를 사용하는 여러 가지 방법을 나열합니다. 필요한 친구는 부동 소수점을 지우는 CSS Clearfix 메서드를 참조할 수 있습니다.(css float를 클리어해야 하는 이유는 무엇인가요?
1. Baidu에서 "cssclear float"를 검색하면 언급되는 내용이 많이 나옵니다. ".clearfix는 상자의 내부 플로트를 지울 때 사용할 수 있습니다." .clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}<p class="clearfix">
<p class="floated"></p>
</p>로그인 후 복사
1 IE6 및 7에서 Zoom: 1은 hasLayout을 트리거합니다. 요소 내부 플로트를 닫습니다.
2. 표준 브라우저에서 .clearfix:after 가상 클래스는 .clearfix에 적용된 요소 뒤에 명확한 블록 수준 요소를 삽입하여 부동 소수점을 지웁니다.
<p>
<p class="floated"></p>
</p>
<p style="clear: both"></p>
로그인 후 복사
둘째, .clearfix의 단점
위 코드에서 볼 수 있듯이 IE6, 7을 제외하고 표준 브라우저에는 .clearfix가 삽입됩니다. Clear:both 요소가 추가되어 불필요한 수레를 지울 가능성이 높습니다. 설명:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
html, body { padding: 0; margin: 0; }
ul { margin: 0; padding: 0; }
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
.left-col {
background: red; float: left;
width: 100px;
height: 300px;
}
.right-col {
margin-left: 100px;
}
.menu {
border: 1px solid #000;
}
.menu li { float: left;
display: block;
padding: 0 1em;
margin: 0 1em 0 0;
background: #ccc;
}
.placeholder {
background: yellow;
height: 400px;
} </style>
</head>
<body>
<p class="left-col">
</p>
<p class="right-col">
<ul class="menu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
<p class="placeholder"></p>
</p>
</body>
</html>로그인 후 복사
<ul class="menu clearfix">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
로그인 후 복사
그러나 .clearfix를 적용한 후에는 표준 브라우저에서 페이지가 매우 지저분해집니다. 이는 .clearfix:after가 부동 .left-col도 지우기 때문입니다.
3. .clearfix 재구성
위 오류가 발생한 후 .clearfix:after 외에 다른 방법이 있는지 분석합니다. 대답은 '예'입니다. 블록 형식 지정 컨텍스트 문서에서는 블록 형식 지정 컨텍스트를 구성하는 요소가 내부 요소의 부동을 지울 수 있다고 언급되어 있습니다. 그런 다음 .clearfix를 블록 형식 지정 컨텍스트로 만드세요. 블록 형식 지정 컨텍스트를 구성하는 방법에는 여러 가지가 있습니다.
float 값은 없음이 아닙니다.
- overflow 값은 보이지 않습니다.
- display 값은 table-cell, table-caption, inline-block 중 하나입니다.
- 위치 값은 상대적이거나 정적이지 않습니다.
- 분명히 float와 position은 우리 요구에 적합하지 않습니다. 오버플로 또는 표시 중 하나만 선택할 수 있습니다. .clearfix 및 .menu가 적용된 메뉴는 다중 레벨일 가능성이 높기 때문에 Overflow: Hidden 또는 Overflow: auto는 요구 사항을 충족하지 않습니다(드롭다운 메뉴를 숨기거나 스크롤 막대를 표시함). 디스플레이만 사용하세요. 조치를 취하세요. .clearfix의 표시 값을 table-cell, table-caption, inline-block 중 하나로 설정할 수 있지만, display: inline-block은 추가 공백을 생성하므로 역시 제외됩니다. 남은 것은 table-cell과 table-caption뿐입니다. display: table은 익명 상자 중 하나를 생성하기 때문에 .clearfix를 블록 서식 컨텍스트로 만들 수 있습니다. (표시 값은 table-cell입니다.) 블록 서식 지정 컨텍스트를 형성합니다. 이러한 방식으로 새로운 .clearfix는 내부 요소의 부동 소수점을 닫습니다. 아래는 리팩토링 후의 .clearfix입니다.
.clearfix {
zoom: 1;
display: table;
width: 100%;
}로그인 후 복사
넷째, 요약
IE6 및 7에서는 hasLayout을 트리거하는 요소가 내부 부동 소수점을 지울 수 있는 한입니다. 표준 브라우저에서 내부 부동 요소를 지우는 방법은 여러 가지가 있습니다. .clearfix:after를 제외하고 다른 방법은 목적을 달성하기 위해 새로운 블록 형식 지정 컨텍스트를 생성하는 것 이상입니다. 어떤 조건에서 어떤 방법을 쓸 수 있다면 이 정도면 충분하다고 생각합니다...Css의 cleanfix float 클리어 방법 관련 글은 php 중국어 홈페이지를 참고해주세요
관련 기사:
clearfix에 대한 심층 분석
CSS에서 Clearfix 사용에 대한 심층적 이해
CSS에서 ClearFix 및 Clear 사용법에 대한 간략한 논의
Clearfix 클리어 플로팅 방식에 대한 CSS
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
