CSS를 사용한 클리어 플로트 메소드 요약

이 글에서는 주로 플로팅 및 클리어 플로팅을 해결하기 위해 CSS를 사용하는 여러 가지 방법을 소개합니다. 1. 상위 요소의 높이를 설정합니다. 2. 오버플로 3. 하위 요소(블록 수준)를 추가하고 clear 속성 값을 둘 다로 설정하여 문제를 해결합니다(칸막이벽 방식, 내부 벽 방식). 이전의사객체 플로트를 지웁니다. 아래 에디터로 살펴보겠습니다

1. 상위 요소의 높이 설정

요소가 부동하려면 상위 요소에 높이가 있어야 합니다. 높이 상자 안에서만 플로트를 닫을 수 있습니다.

높이가 있는 상자에 플로트되어 있는 한 이 플로트는 후속 플로팅 요소에 영향을 미치지 않으므로 플로트의 영향이 사라집니다. 🎜>

단점: 직장에서는 번거롭고 페이지의 급격한 변화에 적응할 수 없기 때문에 모든 상자에 높이를 추가하지 않습니다.

2. 오버플로

부모 요소의 높이를 지원합니다

아버지는 떠다니는 아들의 지원을 받을 수 없습니다. . 그러나 아버지에게 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>

가장 간단한 클리어 플로트 방법은 상자에 명확한: 둘을 추가하여 다른 상자의 영향을 받지 않는 자체 내부 요소를 나타내는 것입니다.

단점: 여백이 유효하지 않습니다. 두 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의 배경과 테두리를 늘릴 수 있습니다.

4. 플로트 지우기

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

이 방법은 더 자주 사용되며 프로젝트에서도 이 방법을 사용하는 것이 좋습니다

위 내용은 CSS를 사용한 클리어 플로트 메소드 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!