CSS의clearfix-부동 지우기

하나, 뭐야.clearfix
Google이나 Baidu에 가서 "css 부동 제거"를 아무렇게나 검색하면 많은 사이트에서 "상자 내부 부동 제거 시.clearfix"를 사용할 수 있습니다.

.clearfix:after { content: " "; display: block; clear: both; height: 0; } .clearfix { zoom: 1; } <div class="clearfix"> <div class="floated"></div> </div>

위의 코드는 바로.clearfix의 정의와 응용, 간단하게 말하자면.clearfix의 원리:
1. IE6, 7에서 zoom: 1은hasLayout을 촉발하여 원소를 내부의 부동을 닫는다.
2、표준 브라우저에서,.clearfix: 애프터 이 위조류가 적용됩니다.clearfix의 요소 뒤에clear:both의 블록급 요소를 삽입하여 부동을 제거하는 역할을 합니다.

<div> <div class="floated"></div> </div> <div style="clear: both"></div>

이,.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> <div class="left-col"> </div> <div 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> <div class="placeholder"></div> </div> </body> </html>

위의 코드는 두 열로 구성된 페이지를 구성한다.주의하다.menu 이 메뉴는 테두리를 설정했지만, 왜냐하면.menu의 리 원소는 왼쪽으로 떠서 생긴 것이다.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의 부동도 지워졌습니다.
셋째, 재구성.clearfix
위의 오류에 부딪힌 후에 분석해 보세요.clearfix: 애프터 이런 방식 외에 원소 내부의 부동을 제거하는 다른 방법이 없습니다.답은 있다. 백화 블록 포맷 컨텍스트라는 글에서 블록 포맷 컨텍스트를 구성하는 요소는 내부 요소의 부동을 제거할 수 있다고 언급했다.그럼clearfix는 Block Formatting Context를 형성하면 됩니다.Block Formatting Context를 구성하는 방법은 다음과 같습니다.
4

float의 값은 none이 아닙니다

overflow의 값은 visible이 아닙니다

display의 값은 table-cell, table-caption, inline-block 중 하나입니다

position의 값은 relative 및 static이 아닙니다

플로트와 포지션은 우리의 요구에 적합하지 않다는 것이 분명하다.오버플로우나 디스플레이 중 하나만 선택할 수 있습니다.응용했으니까.clearfix 및.메뉴가 여러 단계일 가능성이 높기 때문에 오버플로우:hidden 또는 오버플로우:auto도 수요를 만족시키지 못합니다(밑에 있는 메뉴를 숨기거나 스크롤 바를 꺼낼 수 있습니다). 그러면 디스플레이에서만 시작할 수 있습니다.
우리는 할 수 있다.clearfix의 디스플레이 값은 table-cell, table-caption, inline-block 중 하나로 설정되어 있지만 디스플레이: inline-block은 여분의 공백이 생기기 때문에 제거합니다.나머지는table-cell,table-caption뿐입니다. 호환성을 확보하기 위해display:table로 사용할 수 있습니다.clearfix는 Block Formatting Context를 형성합니다. display: table는 익명 상자를 생성하기 때문에 이 익명 상자 중 하나(display 값은 table-cell)가 Block Formatting Context를 형성합니다.이렇게 우리 새로운.clearfix는 내부 요소의 부동을 닫습니다.다음은 재구성한 다음입니다.clearfix.

.clearfix { zoom: 1; display: table; width: 100%; }

넷째, 총결산
IE6, 7 아래에서hasLayout을 촉발한 요소만 있으면 내부 부동을 제거할 수 있습니다.표준 브라우저 아래에서 요소 내부의 부동을 제거하는 방법은 매우 많다.clearfix:after 이런 방식, 나머지 방법은 새로운 Block Formatting Context를 만들어서 목적을 달성하는 것이다.만약 어떤 조건하에서 어떤 방법을 사용할 수 있다면, 나는 이 정도면 충분하다고 생각한다.
본문은 다음과 같습니다.http://www.missage.com/1220.html
---------------------------------------------
BootStrap에 대한clearfix 정의:

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

CSS의clearfix-부동 지우기

좋은 웹페이지 즐겨찾기