의사 요소를 사용하여 CSS에서 부동 소수점을 지우는 방법

BFC란 무엇인가요?

블록 수준 서식 지정 컨텍스트는 내부 및 외부 요소의 위치 지정이 서로 영향을 미치지 않도록 BFC 내부 요소를 외부 요소로부터 격리하는 독립적인 렌더링 영역입니다.

먼저 용어를 이해해 보겠습니다. BFC(블록 형식 지정 컨텍스트)는 중국어로 "블록 수준 형식 지정 컨텍스트"입니다.

먼저 원칙을 기억하세요:

요소에 BFC가 있으면 내부 요소가 어떻게 오르락 내리락하든 외부 요소에 영향을 미치지 않습니다. 따라서 BFC 요소는 마진 겹침을 가질 수 없습니다. 마진 겹침은 외부 요소에 영향을 미치기 때문입니다. BFC 요소는 부동의 영향을 제거하는 데 사용될 수도 있습니다. 왜냐하면 제거되지 않으면 부동 자식 요소가 부모의 높이를 유발하기 때문입니다. 요소를 축소하면 후속 요소의 레이아웃과 위치 지정에 필연적으로 영향을 미치며 이는 분명히 BFC 요소를 위반합니다. 요소의 하위 요소는 외부 요소의 설정에 영향을 미치지 않습니다.

(권장 튜토리얼: CSS 튜토리얼)

다음 상황에서 BFC가 실행됩니다.

•

•float 값은 없음이 아닙니다
•overflow 값은 auto, scroll, hide
•display 값은 table-cell, table-caption 및 inline에 있습니다. --block
•위치의 값은 상대적이거나 정적이지 않습니다. 즉, position:absolute/fixed

분명히 오버플로 값을 숨김으로 설정하면 컨테이너를 만듭니다. 요소에 BFC가 있으면 하위 요소는 부동 상태가 됩니다. 상위 요소의 높이 축소 효과는 발생하지 않습니다.

유사 클래스 요소를 사용하여 부동 소수점 삭제:

.clearFix::after,.clearFix::before {
       display: block;
      content: '';
      clear: both;
      visibility: hidden;
      height: 0;
}
.clearFix { zoom: 1;}

관련 비디오 튜토리얼 권장 사항: css 비디오 튜토리얼 #🎜 🎜#

위 내용은 의사 요소를 사용하여 CSS에서 부동 소수점을 지우는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!