clearfix 클래스는 CSS에서 무엇을합니까?

clearfix 클래스는 CSS에서 무엇을합니까? [복제]

---

이 질문에 이미 답변이 있습니다.

• clearfix 란 무엇입니까? 10 답변

div태그는 clearfix자식 divs이 float속성을 사용할 때 클래스를 사용하는 것을 보았습니다 . clearfix 클래스는 다음과 같습니다.

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
}

속성을 사용할 clearfix때 사용하지 않으면 bottom-border테두리가 자식 위에 표시 된다는 것을 알았습니다 divs. 누군가 clearfix 클래스의 기능을 설명 할 수 있습니까? 또한 왜 두 가지 display속성이 있습니까? 그것은 나에게 매우 이상하게 보입니다. 특히 무슨 content:'.'뜻 인지 궁금 합니다.

고마워, G

---

수레의 작동 원리

페이지에 플로팅 요소가 있으면 신문에서 텍스트가 그림 주위를 둘러 보는 방식과 유사하게 플로팅 요소가 플로팅 요소를 둘러 쌉니다 . 문서 관점 ( HTML 의 원래 목적 )에서 플로트가 작동하는 방식입니다.

float vs display:inline

의 발명 이전에 display:inline-block웹 사이트는 float요소를 서로 옆에 설정 하는 데 사용 합니다. float이상이 바람직하다 display:inline그들은 블록 요소로 취급하고 있기 때문에 할 수있는 요소를 떴다 - 후자 때문에, 당신은 요소의 크기 (폭과 높이)뿐만 아니라 수직 패딩 (상단과 하단)를 설정할 수 없습니다.

플로트 문제

주요 문제는 우리가 float의도 된 목적에 반하여 사용 하고 있다는 것입니다.

다른 하나는 float나란히 블록 수준 요소를 허용하지만 플로트는 컨테이너에 모양을 부여하지 않는다는 것 입니다. position:absolute요소가 "레이아웃에서 제거"되는 것과 같습니다 . 빈 용기에 포함 된 인스턴스를위한 100 픽셀 X 100 픽셀 플로팅 <div>상기 <div>의지하지 부여 용기에 100 픽셀 높이이다.

와 달리 position:absolute주변 콘텐츠에 영향을줍니다. 플로팅 된 요소 뒤의 콘텐츠는 요소를 "포장"합니다. 신문 텍스트가 이미지 주위를 흐르는 것처럼 그 옆에 렌더링 한 다음 그 아래에 렌더링하는 것으로 시작합니다.

구조에 대한 Clearfix

무엇 clearfix가 하는 일은 수레 또는 그 아래에 렌더링하는 수레를 포함하는 컨테이너 후 강제 내용입니다. 명확한 수정을위한 많은 버전이 있지만 일반적으로 사용되는 버전 (CSS 속성을 사용하는 버전)에서 이름을 얻었습니다 clear.

예

다음은 브라우저 및 사용 사례에 따라 clearfix를 수행하는 몇 가지 방법 입니다. clear완벽한 브라우저 간 명확한 수정을 위해 CSS 에서 속성 을 사용하는 방법과 각 브라우저에서 float가 렌더링되는 방법 만 알면 됩니다.

가지고있는 것

Your provided style is a form of clearfix with backwards compatibility. I found an article about this clearfix. It turns out, it's an OLD clearfix - still catering the old browsers. There is a newer, cleaner version of it in the article also. Here's the breakdown:

• The first clearfix you have appends an invisible pseudo-element, which is styled clear:both, between the target element and the next element. This forces the pseudo-element to render below the target, and the next element below the pseudo-element.

• The second one appends the style display:inline-block which is not supported by earlier browsers. inline-block is like inline but gives you some properties that block elements, like width, height as well as vertical padding. This was targeted for IE-MAC.

• This was the reapplication of display:block due to IE-MAC rule above. This rule was "hidden" from IE-MAC.

All in all, these 3 rules keep the .clearfix working cross-browser, with old browsers in mind.

---

When an element, such as a div is floated, its parent container no longer considers its height, i.e.

<div id="main">
  <div id="child" style="float:left;height:40px;"> Hi</div>
</div>

The parent container will not be be 40 pixels tall by default. This causes a lot of weird little quirks if you're using these containers to structure layout.

So the clearfix class that various frameworks use fixes this problem by making the parent container "acknowledge" the contained elements.

Day to day, I normally just use frameworks such as 960gs, Twitter Bootstrap for laying out and not bothering with the exact mechanics.

Can read more here

http://www.webtoolkit.info/css-clearfix.html

---

clearfix is the same as overflow:hidden. Both clear floated children of the parent, but clearfix will not cut off the element which overflow to it's parent. It also works in IE8 & above.

There is no need to define "." in content & .clearfix. Just write like this:

.clr:after {
    clear: both;
    content: "";
    display: block;
}

HTML

<div class="parent clr"></div>

Read these links for more

http://css-tricks.com/snippets/css/clear-fix/,

What methods of ‘clearfix’ can I use?

참고URL : https://stackoverflow.com/questions/9543541/what-does-the-clearfix-class-do-in-css