집 > 기사 > 웹 프론트엔드 > CSS는 부동 소수점을 제거하는 데 몇 가지 방법을 사용합니까?

CSS는 부동 소수점을 제거하는 데 몇 가지 방법을 사용합니까?

이번에는 CSS에서 몇 가지 플로트 클리어 방법과 플로트 클리어 시 주의사항을 알려드리겠습니다. 다음은 실제 사례입니다.

1. 부모 요소의 높이를 설정하세요

요소가 부동하려는 경우 해당 상위 요소에만 높이가 있어야 합니다. 높이가 있는 경우 이 부동은 후속 부동 요소에 영향을 미치지 않으므로 부동의 영향을 제거해야 합니다.

단점: 작업에서는 모든 상자에 높이를 추가하지 않습니다. 페이지에 빠르게 적응하세요.

overflow부모 요소의 높이를 지탱하세요

아버지는 떠다니는 아들의 지탱을 받을 수 없습니다. 그러나 아버지에게 Overflow:hidden; 을 추가하는 한, 아버지는 아들에 의해 밀려날 수 있습니다.

overflow:hidden; 마진을 적용할 수 있습니다.

overflow:hidden;
overflow:auto;

단점: 표시할 오버플로 콘텐츠가 있으면 동시에 숨겨집니다.

3. 문제를 해결하려면 하위 요소(블록 수준)를 추가하고 명확한 속성 값을 둘 다로 설정하세요.

<p>
      <p></p>
      <p></p>
     <p></p>
  </p>
   <p>   → clear:both;
       <p></p>
       <p></p>
     <p></p>
  </p>

수레를 지우는 가장 간단한 방법은 상자에 Clear:both를 추가하여 자체를 나타내는 것입니다. 내부 요소는 다른 상자의 영향을 받지 않습니다.

단점: 여백이 유효하지 않습니다. 두 p 사이에는 간격이 없습니다.

3.1. 칸막이벽 방식: 두 개의 부동 요소 사이에 벽을 만듭니다. 뒤의 플로팅 요소가 앞의 플로팅 요소를 쫓지 않도록 플로트의 두 부분을 분리합니다.

벽은 자신의 몸체를 틈으로 활용합니다.

<p>
       <p></p>
       <p></p>
       <p></p>
  </p>
   <p class="clear"></p>
   <p>
      <p></p>
      <p></p>
      <p></p>
  </p>

파티션 방법이 사용하기 쉽다는 것을 알았지만 첫 번째 p에는 여전히 높이가 없습니다. 이제 첫 번째 p가 자신의 아들을 기준으로 높이를 자동으로 확장하기를 원합니다.

3.2. 내부 벽체 방식:

<p>
       <p></p>
       <p></p>
       <p></p>
       <p class="clear"></p>
   </p>
  <p>
       <p></p>
      <p></p>
      <p></p>
  </p>

내부 벽체 방식의 장점은 뒷부분의 p가 앞부분의 p를 쫓아오지 않을 뿐만 아니라, 첫 번째 p는 높이를 얻을 수 있습니다. 이런 식으로 p의 높이에 따라 이 p의 배경과 테두리를 늘릴 수 있습니다

4. 부동 객체를 지우려면 의사 객체 뒤나 앞에 사용하세요

p:after{content:"";display:block;clear:both;}
p:before{content:"";display:block;clear:both;}

이 방법이 자주 사용됩니다. 프로젝트에서는 이 방법을 사용하는 것이 좋습니다

이 기사의 사례를 읽으신 후 이 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!