CSS에서 수레를 지우는 방법은 무엇입니까? CSS 부동 소수점 지우기의 네 가지 방법 소개

css 부동소수점 지우기는 CSS 레이아웃에서 자주 볼 수 있는데, CSS에서 부동소수점을 지우는 방법은 무엇일까요? 이 기사에서는 CSS에서 부동 소수점을 지우는 방법을 소개하고 CSS 부동 소수점을 사용해야 하는 이유를 간략하게 소개합니다.

마지막 기사CSS 플로팅은 무엇을 의미하나요? CSS가 수레를 지워야 하는 이유는 무엇입니까? 에서는 CSS의 일부 요소가 블록 수준 요소이고 자동으로 새 줄을 시작하기 때문에 CSS 부동 소수점 사용에 대해 이미 언급했습니다. 인라인 요소인 또 다른 유형의 인라인 요소도 있습니다. 이전 콘텐츠와 분리되어 "한 행"으로 표시되지만 때로는 CSS 부동 소수점을 사용해야 하는 이 레이아웃을 변경해야 합니다. 그러나 "높이 붕괴"가 발생하면 수레를 지워야 합니다. 그렇다면 CSS에서 부동 소수점을 지우는 방법은 무엇입니까?

CSS에서 부동 소수점을 지우는 네 가지 방법을 살펴보겠습니다.

부동산을 지우는 CSS 메서드:

속성이 명확한 빈 요소 사용

#🎜 🎜#

, CSS에서 .clear{clear:both;} 속성을 할당하여 부동 소수점을 지웁니다. 다음을 사용할 수도 있습니다.
또는

---

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

설명:

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

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

Css 플로팅을 지우는 방법 2:

CSS 오버플로 속성 사용 #🎜 🎜#플로팅 요소의 컨테이너에 오버플로:hidden; 또는 오버플로:auto;를 추가하여 컨테이너 너비와 높이를 설정하거나 확대/축소를 설정하는 등 IE6에서 hasLayout을 실행해야 합니다. 부모 요소.

.news {
  background-color: gray;
  border: solid 1px black;
  overflow: hidden;
  *zoom: 1;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

설명:

플로팅 속성을 추가한 후 플로팅 요소가 컨테이너 레이어로 돌아와 컨테이너 높이를 높이고 정리를 수행합니다. 효과.

장점: 구조적, 의미적 문제가 없으며 코드의 양이 매우 적다

단점: 내용이 늘어나면 자동 줄 바꿈이 발생하기 쉽고, 콘텐츠가 숨겨지고 표시될 수 없게 됩니다. POPO는 2004년에 Overflow:hidden이 중간 키에 오류를 발생시키는 것을 발견했는데, 이는 다중 탭 브라우징 컨트롤러로서 받아들일 수 없습니다. 그러니 사용하지 마세요.

플로팅을 지우는 CSS 메서드 3:

인접 요소 처리 사용

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

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.content{
  clear:both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>

css 메소드 4를 사용하여 부동을 지웁니다.

CSS의 :after 의사 요소 사용

#🎜🎜 #

:after 의사 요소(이것은 의사 클래스가 아니라 요소 다음의 가장 가까운 요소를 나타내는 의사 요소라는 점에 유의하세요)와 IEhack을 결합하면 현재 주류와 완벽하게 호환될 수 있습니다. 여기서 IEhack은 Trigger hasLayout을 나타냅니다. 플로팅 요소의 컨테이너에 클리어픽스 클래스를 추가한 다음 이 클래스에 :after 의사 요소를 추가하여 청소할 요소의 끝에 보이지 않는 블록 요소(블록 요소)를 추가합니다. 플로트 위로.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }
.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }
<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

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

마지막: 위 글의 일부 속성에 대한 구체적인 내용은

css manual

을 참조하세요.

관련 권장 사항:

플로트 청소를 위한 일반적인 방법 요약_경험 교환

#🎜 🎜 #css float를 지우는 것을 잊지 마세요. #

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