CSS에서 수레를 지우는 방법은 무엇입니까? 3가지 방법 도입

CSS에서 부동 소수점을 지우는 방법은 무엇입니까? 이 기사에서는 CSS를 사용하여 부동 소수점을 지우는 3가지 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

우선 왜 float를 클리어해야 하는지는 이야기하지 않겠습니다. 어쨌든 float를 클리어하지 않으면 많은 일이 일어날 것입니다.

이제 플로트를 제거하는 데 일반적으로 사용되는 세 가지 방법에 대해 이야기하겠습니다. 이것만으로도 충분합니다.

1. 부동 요소 뒤에 빈 div를 추가하고 부동 요소를 지웁니다.

html 코드:

<div class="wrap">
   <div class="float">浮动</div>
   <div class="clear"></div>
   <div class="nofloat">不想被浮动影响</div>
</div>

css 코드:

.wrap{
  width:500px;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}
.nofloat{
    width:300px;
    height:150px;
    background:red;
}

이제 빈 div가 추가되어도 제공되지 않습니다. float이므로 현재 효과는 세 번째 하위 요소입니다. nofloat는 여전히 부동의 영향을 받습니다.

좋아, 이제 .clear에 클리어 플로트를 추가하세요:

.clear{
    clear:both;
}

새로고침을 하면 효과가 나타납니다:

PS: 이 상황은 수직으로 배열되는 요소에 더 적합합니다. 서로 떠다니는 영향을 받습니다.

2. BFC 기능을 사용하여 부동 소수점을 삭제합니다.

html 코드:

<div class="wrap">
   <div class="float">浮动</div>
   <div class="nofloat">不想被浮动影响</div>
</div>

css 코드:

.wrap{
  width:500px;
  border:1px solid red;
  margin:0 auto;
  overflow:hidden;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}
.nofloat{
    width:300px;
    height:150px;
    background:red;
    overflow:hidden;
}

효과는 다음과 같습니다.

여기의 상위 컨테이너에는 고정된 높이가 없습니다. 원래는 첫 번째 하위 요소가 부동된 후 상위 요소의 높이가 두 번째 하위 요소와 동일한 높이로 축소됩니다. 그러나 두 번째 하위 요소와 상위 요소 모두에 대해 Overflow:hidden이 설정되어 있으므로 위에 제공된 BFC 레이아웃 규칙에 따라 BFC 높이를 계산할 때 BFC 영역이 플로트 상자와 겹치지 않으며 플로팅 요소의 높이도 계산에 참여한다는 것을 알 수 있습니다. . 따라서 수레를 제거하는 효과를 얻을 수 있습니다. 말하기가 다소 혼란스럽긴 하지만 실제로 플로트 클리어는 개발의 실제 상황에 따라 합리적으로 사용해야 합니다.

3. 사용: 의사 요소 뒤에 플로팅 요소의 상위 요소 플로트를 삭제합니다.

html 코드:

<div class="wrap">
   <div class="float">浮动</div>
</div>

css 코드:

.wrap{
  width:500px;
  border:1px solid red;
  margin:0 auto;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}

이때 하위 요소가 플로팅되어 중단됩니다. 문서 흐름에서 멀어지므로 부모 요소의 높이가 축소됩니다.

부모 요소의 테두리가 함께 압착되는 것을 볼 수 있습니다.

좋아, 이제 상위 요소에 클리어픽스 클래스를 추가하세요:

<div class="wrap clearfix">
   <div class="float">浮动</div>
</div>

.clearfix{
    *zoom:1;
}
.clearfix:after{
    content:'clear';
    display:block;
    height:0;
    clear:both;
    overflow:hidden;
    visibility:hidden;
}

이제 새로고침 후 효과는 다음과 같습니다.

이 방법과 BFC 클리어링 플로트는 실제 개발에서 개인이 더 일반적으로 사용합니다. 동일합니다.

알겠습니다. 여기서는 플로트를 클리어하기 위해 간단히 언급하겠습니다!

오류가 있으면 메시지를 남겨서 수정해주세요.

추천 튜토리얼: CSS 비디오 튜토리얼, CSS3 비디오 튜토리얼

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