클리어픽스란?
, <div>을 받다clearfix.
구글에서 빠르게 검색한 결과 IE6용이라는 것을 알 수 있었습니다만, 실제로 clearfix란 무엇입니까?
클리어픽스가 없는 레이아웃과 비교하여 클리어픽스가 있는 레이아웃의 예를 제시해 주시겠습니까?
IE9 이하를 지원할 필요가 없다면 플렉스박스를 자유롭게 사용할 수 있고 플로팅 레이아웃을 사용할 필요가 없습니다.
오늘날 플로팅 요소를 레이아웃에 사용하는 것은 보다 나은 대안을 사용함에 따라 점점 더 권장되지 않고 있다는 점을 주목할 필요가 있습니다.
display: inline-block낫다 - 더 좋다- Flexbox - 베스트 (단 브라우저 지원 제한적)
Flexbox는 Firefox 18, Chrome 21, Opera 12.10, Internet Explorer 10, Safari 6.1(모바일 사파리 포함) 및 Android 기본 브라우저 4.4에서 지원됩니다.
브라우저의 자세한 리스트에 대해서는, https://caniuse.com/flexbox 를 참조해 주세요.
(아마도 그 위치가 완전히 확립되면, 요소를 배치하는 데 절대적으로 권장되는 방법이 될 것입니다.)
clearfix는 요소가 하위 요소를 자동으로 지우므로 추가 마크업을 추가할 필요가 없습니다.일반적으로 요소를 띄워 수평으로 쌓는 플로트 레이아웃에 사용됩니다.
clearfix는 부유 요소의 제로 하이트 컨테이너 문제를 해결하는 방법입니다.
클리어 픽스는 다음과 같이 실행됩니다.
.clearfix::after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
또, IE<8 의 서포트를 필요로 하지 않는 경우는, 이하도 괜찮습니다.
.clearfix::after {
content: "";
display: table;
clear: both;
}
일반적으로 다음과 같은 작업을 수행해야 합니다.
<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</div>
clearfix를 사용하는 경우 필요한 것은 다음뿐입니다.
<div class="clearfix">
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
</div>
이 기사에서 읽어보세요 - Chris Coyer @ CSS-Tricks
다른 답은 정답입니다.이 CSS를 처음 CSS를 남용했던 시대의 유물이라는 .float모든 레이아웃을 할 수 있습니다. float긴 텍스트 옆에 플로트 이미지 같은 것을 하도록 되어 있습니다만, 많은 사람들이 그것을 주된 레이아웃 메카니즘으로 사용하고 있습니다.실제로 그런 의도가 아니었기 때문에 작동시키려면 "clearfix"와 같은 해킹이 필요합니다.
★★★★★★★★★★★★★★★★★.display: inline-block는 견고한 대안(IE6 및 IE7 제외)이지만, 최신 브라우저에서는 플렉스박스, 그리드 레이아웃 등의 이름으로 훨씬 더 유용한 레이아웃 메커니즘이 제공되고 있습니다.
clearfix컨테이너가 플로팅된 아이를 감쌀 수 있습니다.★★★ clearfix또는 동등한 스타일링으로, 용기는 둥둥 떠다니는 아이들을 감싸지 않고 마치 둥둥 떠다니는 아이들이 절대적인 위치에 있는 것처럼 무너집니다.
니콜라스 갤러거와 티에리 코블렌츠를 주요 저자로 하는 클리어픽스에는 여러 가지 버전이 있습니다.
오래된 브라우저를 지원하려면 다음 clearfix를 사용하는 것이 좋습니다.
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
SCSS에서는 다음 기술을 사용할 수 있습니다.
%clearfix {
&:before, &:after {
content:" ";
display:table;
}
&:after {
clear:both;
}
& {
*zoom:1;
}
}
#clearfixedelement {
@extend %clearfix;
}
오래된 브라우저 지원에 관심이 없다면 더 짧은 버전이 있습니다.
.clearfix:after {
content:"";
display:table;
clear:both;
}
2017년 2분기 상황을 업데이트하기 위해.
새로운 CSS3 디스플레이 속성은 Firefox 53, Chrome 58 및 Opera 45에서 사용할 수 있습니다.
.clearfix {
display: flow-root;
}
다음 URL에서 브라우저의 가용성을 확인합니다.http://caniuse.com/ #syslog=flow-root
요소(표시 속성이 flow-root로 설정된 경우)는 블록 컨테이너 상자를 생성하고 흐름 레이아웃을 사용하여 내용을 레이아웃합니다.컨텐츠에 대해 항상 새로운 블록 포맷 컨텍스트를 설정합니다.
즉, 1개 또는 여러 개의 부동자녀를 포함하는 부모div를 사용하는 경우 이 속성은 부모가 모든 자식을 둘러싸도록 합니다.확실한 해킹은 필요 없습니다.모든 자녀 또는 마지막 더미 요소(마지막 자녀에서 :before와 함께 clearfix 배리언트를 사용하고 있는 경우).
.container {
display: flow-root;
background-color: Gainsboro;
}
.item {
border: 1px solid Black;
float: left;
}
.item1 {
height: 120px;
width: 120px;
}
.item2 {
height: 80px;
width: 140px;
float: right;
}
.item3 {
height: 160px;
width: 110px;
}<div class="container">
This container box encloses all of its floating children.
<div class="item item1">Floating box 1</div>
<div class="item item2">Floating box 2</div>
<div class="item item3">Floating box 3</div>
</div>간단히 말해서, clearfix는 해킹입니다.
그것은 부유아동이 부모에게 넘치지 않도록 보장하는 유일한 합리적인 방법이기 때문에 우리 모두가 감수해야 하는 추악한 것들 중 하나이다.다른 레이아웃 스킴도 있지만, 오늘날 웹 설계/개발에서는 플로팅이 너무 일반적이기 때문에 clearfix 해킹의 가치를 무시할 수 없습니다.
개인적으로 Micro Clearfix 솔루션(Nicolas Gallagher)을 선호합니다.
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
.container {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
CSS 플로트 기반 레이아웃에서 일반적으로 사용되는 기술은 플로팅 요소가 포함되는 요소에 소수의 CSS 속성을 할당하는 것입니다.입니다.clearfix (는, ( ), ( ), ( )의 CSS .
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
zoom: 1
}
입니다.:after숨겨진 것으로 표시된 단일 '.'를 포함하는 활성 요소. 이 요소는 기존의 모든 플로트를 지우고 다음 콘텐츠의 페이지를 효과적으로 재설정합니다.
승인된 답변을 시험해 보았지만 내용 정렬에 문제가 있었습니다.아래와 같이 ":before" 셀렉터를 추가하면 문제가 해결됩니다.
// LESS HELPER
.clearfix()
{
&:after, &:before{
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
}
위의 LESS는 아래의 CSS로 컴파일 됩니다.
clearfix:after,
clearfix:before {
content: " ";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
클리어픽스를 실현하기 위한 다른 (아마도 가장 간단한) 옵션은overflow:hidden;포함 요소 위에 있습니다.예를들면
.parent {
background: red;
overflow: hidden;
}
.segment-a {
float: left;
}
.segment-b {
float: right;
}<div class="parent">
<div class="segment-a">
Float left
</div>
<div class="segment-b">
Float right
</div>
</div>물론, 이것은 컨텐츠가 오버플로우 하는 것을 결코 원하지 않는 경우에만 사용할 수 있습니다.
Clearfix란?
요소가 추가 마크업 없이 하위 요소를 자동으로 지울 수 있는 방법입니다.
속성 조작: CSS clearfix를 사용하여 원하는 요소에서 오버플로우 요소를 수정합니다.이 작업은 다음 3가지 속성으로 수행할 수 있습니다.
- 오버플로 속성
- 높이 속성
- 부동 속성
이 3가지 CSS 속성은 모두 오버플로우 요소를 수정하기 위해 사용됩니다.
ClearFix가 필요한 이유
- 불필요한 마크업을 추가하는 것을 피하기 위해 요소는 clearfix를 사용하여 요소를 자동으로 지우거나 수정할 수 있습니다.
- 요소가 플로팅되어 수평 스택을 형성하는 플로트 레이아웃에 사용됩니다.
Clearfix는 언제입니까?
- 두 개 이상의 부동 항목이 서로 옆에 배치된 경우.
이러한 방식으로 항목을 배치하면 상위 컨테이너의 높이가 0이므로 레이아웃이 쉽게 흐트러질 수 있습니다.이 문제는 브라우저 간에 일관성이 없기 때문에 문제가 더 어려워집니다.이 모든 문제를 해결하기 위해 clearfix가 작성되었습니다.
다음과 같이 합니다.
예(이해를 위해):
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head><body>
<h2>Without Clearfix</h2>
<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p>
<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>
</body>상기 코드의 출력:
Clearfix가 폐지되고 있습니까?
처음 제안된 지 거의 15년이 지났고 2007년과 2013년의 업데이트로 현재 CSS 그리드와 Flexbox가 웹상의 고급 레이아웃을 위한 공백을 메우고 있기 때문에 클리어픽스는 관련성을 잃어가고 있습니다.
도움이 됐으면 좋겠다.
여기 다른 방법이 있습니다. 같은 것이지만 조금 다릅니다.
차이점은 내용 도트(content dot은 a로 치환됩니다.\00A0==whitespace
자세한 내용은 http://www.jqui.net/tips-tricks/css-clearfix/를 참조해 주세요.
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}
여기 간략한 버전이 있습니다.
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}
언급URL : https://stackoverflow.com/questions/8554043/what-is-a-clearfix
'programing' 카테고리의 다른 글
| Excel VBA 변수를 중지하거나 아무것도 설정하지 않는 경우 (0) | 2023.04.19 |
|---|---|
| Xcode 6 gitignore 파일은 무엇을 포함해야 합니까? (0) | 2023.04.19 |
| RE 오류: Mac OS X에서 잘못된 바이트 시퀀스 (0) | 2023.04.19 |
| Excel vba에서 python 스크립트를 호출하는 방법 (0) | 2023.04.19 |
| Bash를 사용하는 가장 좋아하는 명령줄 트릭은 무엇입니까? (0) | 2023.04.19 |