부동 소수점을 지우는 가장 포괄적인 CSS Clearfix 방법
- PHPz원래의
- 2017-03-17 16:25:554492검색
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>위 코드는 .clearfix의 정의와 적용입니다. .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>위 코드는 2열 레이아웃 페이지를 구성합니다. .menu 메뉴에는 테두리가 있지만 .menu의 li 요소는 왼쪽에 떠 있기 때문에 .menu에는 높이가 없으므로 .clearfix를 사용하여 .menu 내부에 떠 있는 콘텐츠를 지울 수 있습니다. 코드는 다음과 같습니다: <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에 대한 심층 분석
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.