CSS에서 수레를 지우는 방법은 무엇입니까? CSS에서 부동 소수점을 지우는 5가지 방법 요약-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 수레를 지우는 방법은 무엇입니까? CSS에서 부동 소수점을 지우는 5가지 방법 요약

不言

Aug 10, 2018 am 11:38 AM

CSS 클리어 플로트

이 기사에서는 CSS에서 부동 소수점을 지우는 방법을 소개합니다. CSS에서 부동소수점을 지우는 5가지 방법에 대한 요약은 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

방법 1(clear 속성이 있는 빈 태그 사용)

태그는 div일 수 있습니다. br　hr

와 같이 플로팅 요소 뒤에 빈 요소를 사용하세요. CSS에서 .clear{clear:both;} 속성을 할당하여 부동 소수점을 지웁니다. 청소를 위해
또는

를 사용할 수도 있습니다.

장점: 간단하고 코드가 적으며 브라우저 호환성이 좋습니다.

단점: 의미 없는 HTML 요소를 많이 추가해야 하고, 코드가 충분히 우아하지 않으며, 나중에 유지 관리가 쉽지 않습니다.

플로팅 요소 아래에

.clear{ height:0px;font-size:0;clear:both;}를 추가하지만 IE6에서는 블록 요소에 최소 높이, 즉 높이가 19px 이하인 경우 기본값은 19px입니다

해결 방법: 글꼴 크기:0 또는 Overflow:hidden; 부동 요소를 삭제하려면 부동 요소 아래에 을 추가하세요.

방법 2(플로팅 요소의 상위 요소에 오버플로 속성 추가)는 빈 태그 요소를 통해 플로트를 지울 때 의도하지 않은 코드를 추가해야 하는 단점을 해결합니다.

이 방법을 사용하려면 부동을 지워야 하는 요소에서 CSS 속성만 정의하면 됩니다. Overflow:auto

overflow:auto는 높이를 적응적으로 만드는 것입니다. IE6과 호환되므로 height: 1% 솔루션을 사용할 수도 있습니다.

참고: 확대/축소는 W3C 표준을 준수하지 않습니다. Overflow:hidden도 구현할 수 있습니다.

<ul style="overflow:auto;zoom:1>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>

로그인 후 복사

방법 3: (플로팅 요소의 컨테이너에 float를 추가합니다. 즉, 플로트를 지우려면 부모에 float를 추가합니다.)

<div style="float: right;background-color: #1a1a1a;">
   <div style="float: right;width: 300px;height: 300px;background-color: #2a85a0;">
 
   </div>
   <div style="width: 500px;height: 200px;background-color: #8a6d3b">
 
   </div>
</div>

로그인 후 복사

또한 플로팅 요소의 컨테이너에 float 속성을 추가합니다. 내부 부동 지우기

단점: 전체적으로 부동하게 만들어 레이아웃에 영향을 미치므로 권장되지 않습니다.

방법 4: (수레를 지우려면 의사 개체 뒤에 사용)

의사 요소 뒤(이것은 의사 클래스가 아니라 의사 요소이며 요소 다음의 가장 가까운 요소를 나타냄) 현재 주류 브라우저와 완벽하게 호환되는 IEhack 주요 브라우저의 경우 여기에서 IEhack은 hasLayout을 트리거하는 것을 의미합니다.

뒤에 의사 요소를 사용하여 요소 끝에 보이지 않는 블록 요소(블록 요소)를 추가하여 플로트를 정리합니다.

CSS 의사 요소를 통해 컨테이너 내부 요소 끝에 보이지 않는 공백 "" 또는 점 "."을 추가하고 클리어 속성을 할당하여 플로트를 지웁니다. IE6 및 IE7 브라우저의 경우 haslayout을 트리거하려면clearfix 클래스에 Zoom:1을 추가해야 합니다.

After pseudo-object는 IE 브라우저에서 지원되지 않으므로 IE/WIN 브라우저에 영향을 미치지 않습니다. 구체적인 작성 방법은 다음 예시를 참조하세요. 사용 시 다음 사항에 주의하시기 바랍니다.

1. 이 방법에서는 플로팅 요소를 지워야 하는 의사 객체에 대해 height:0을 설정해야 합니다. 그렇지 않으면 요소가 실제 값보다 몇 픽셀 더 높아집니다.

2. 해당 값은 비어 있을 수 있습니다. 이 방법을 논의할 때 콘텐츠 속성의 값은 "."으로 설정됩니다.

<style type="text/css"> 
.listinfo:after{
      display:block;
      clear:both;
      content:"";  
      visibility:hidden;
      height:0;
} 
<ul class="listinfo">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>

로그인 후 복사

방법 5: 인접 요소 처리 사용

아무 것도 하지 않고 플로팅 뒤에 있는 요소에 클리어 속성을 추가합니다. 요소.

이 방법은 부동 요소 바로 옆에 있는 요소가 여기에서 사용된다는 점을 제외하면 빈 레이블을 추가하는 것과 유사합니다.

사용법:

웹의 기본 레이아웃 중에 :after 의사 요소 방법을 사용하세요.

ul과 같은 작은 모듈에서는 Overflow:hidden;을 사용합니다(발생할 수 있는 숨겨진 오버플로 요소 문제에 주의하세요). 내부 플로트는 특별한 처리 없이 자동으로 지워질 수 있습니다.

텍스트의 인접한 요소를 사용하여 이전 플로트를 정리하세요.

플로트를 정리하기 위해 상대적으로 완벽한 :after 의사 요소 방법을 사용하면 문서 구조가 더 명확해집니다.

BUG 수정:

(1), 이중 여백 버그 IE6을 다룰 때 기억해야 할 또 다른 사항은 다음과 같습니다. 플로트와 같은 방향으로 여백을 설정하면

이중 여백이 발생합니다.