CSS를 사용하여 부동 소수점을 지우는 방법에 대한 자세한 설명

이 글에서는 CSS를 사용하여 플로트를 지우는 자세한 방법을 주로 소개합니다. 단순히 플로트를 지우는 것이 아니라 매번 관련된 문제를 해결할 수 있다는 점은 글 마지막에 언급된 플로트 닫기 해결 방법도 시도해 볼 가치가 있습니다. 도움이 필요한 친구는

clear float 방식
방법 1: Clear 속성이 있는 빈 요소 사용

floating 요소 뒤에 빈 요소 사용을 참조하세요. , 예를 들어

를 선택하고 CSS에서 .clear{clear:both;} 속성을 할당하여 부동 소수점을 지웁니다. 청소를 위해
또는

---

를 사용할 수도 있습니다.

.news {   
  background-color: gray;   
  border: solid 1px black;   
  }   

.news img {   
  float: left;   
  }   

.news p {   
  float: rightright;   
  }   

.clear {   
  clear: both;   
  }

rrree

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

방법 2: CSS의 오버플로 속성을 사용합니다.

플로팅 요소의 컨테이너에 Overflow:hidden; 또는 Overflow:auto;를 추가합니다. 또한 IE6에서는 상위 요소의 컨테이너 너비와 높이를 설정하거나 확대/축소:1을 설정하는 등 HasLayout을 트리거해야 합니다. 오버플로 속성을 추가한 후 플로팅 요소는 컨테이너 레이어로 돌아가 컨테이너의 높이를 높여 플로팅 요소를 정리하는 효과를 얻습니다.

<p class="news">
<img  src="/static/imghw/default1.png"  data-src="news-pic.jpg"  class="lazy"   / alt="CSS를 사용하여 부동 소수점을 지우는 방법에 대한 자세한 설명" >
<p>some text</p>
<p class="clear"></p>
</p>

rrree

방법 3: 플로팅 요소의 컨테이너에 플로트 추가

플로팅 요소의 컨테이너에 플로팅 속성 추가 내부 Floating을 클리어 하지만, 이렇게 하면 전체적으로 Floating이 되어 레이아웃에 영향을 주게 되므로 권장하지 않습니다.

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

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

.news {   
  background-color: gray;   
  border: solid 1px black;   
  overflow: hidden;   
  *zoom: 1;   
  }   

.news img {   
  float: left;   
  }   

.news p {   
  float: rightright;   
  }

rrree

여기 p.content에는 콘텐츠가 있습니다.

방법 5: CSS :after 의사 요소

를 :after 의사 요소와 결합하여 사용합니다(이것은 의사 클래스가 아니라 의사- 요소(요소 다음으로 가장 가까운 요소를 나타냄) 및 IEhack은 현재의 모든 주요 주류 브라우저와 완벽하게 호환됩니다. 여기서 IEhack은 hasLayout을 트리거하는 것을 의미합니다.
플로팅 요소의 컨테이너에 클리어픽스 클래스를 추가한 다음 이 클래스에 :after 의사 요소를 추가하여 요소 끝에 보이지 않는 블록 요소(블록 요소) 추가를 구현하여 플로팅 요소를 정리합니다.

<p class="news">
<img  src="/static/imghw/default1.png"  data-src="news-pic.jpg"  class="lazy"   / alt="CSS를 사용하여 부동 소수점을 지우는 방법에 대한 자세한 설명" >
<p>some text</p>
</p>

rrree

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

요약
위의 예를 통해 플로트를 청소하는 방법은 두 가지 범주로 나눌 수 있음을 쉽게 알 수 있습니다.

하나는 클리어를 사용하는 것입니다. 부동 요소를 포함하는 속성 요소를 닫으려면 끝에 빈 p를 추가합니다. 그리고 요소의 끝에 있는clear:both 속성입니다.

두 번째는 플로팅 요소의 상위 요소인 BFC(Block Formatting Contexts, 블록 수준 포맷팅 컨텍스트)를 트리거하여 상위 요소가 플로팅 요소를 포함할 수 있도록 하는 것입니다.

웹 페이지의 기본 레이아웃에서 :after 의사 요소 메서드를 사용하고 이를 플로트 정리의 주요 방법으로 사용합니다. ul과 같은 작은 모듈에서는 Overflow:hidden을 사용합니다. 숨겨진 오버플로 요소 문제) 플로트 자체인 경우 요소는 특별한 처리 없이 내부 플로트를 자동으로 지울 수 있습니다.

마지막으로 비교적 완벽한 :after 의사 요소 방법을 사용하여 부동 소수점을 정리하여 문서 구조를 더 명확하게 만들 수 있습니다.

추첨: float를 지울 것인가 아니면 float를 닫을 것인가?
우리는 웹페이지 레이아웃에 float를 자주 사용하여 원하는 효과를 더 쉽게 얻을 수 있지만 float에는 숨겨진 위험이 있는 경우가 많습니다. 이때 우리는 일반적으로 플로트를 제거하기 위해 한 가지 작업을 수행하지만 플로트를 제거하면 숨겨진 위험이 남는 경우가 많습니다.

.news {   
  background-color: gray;   
  border: solid 1px black;   
  }   

.news img {   
  float: left;   
  }   

.news p {   
  float: rightright;   
  }   

.content{   
  clear:both;   
  }

렌더링은 다음과 같습니다.

clear:both가 발에서 플로트를 제거하는 데 사용되지만 기본 높이가 하위 요소의 높이에 적응할 수 없어 붕괴가 발생합니다(화살표로 가리킴).

다음은 닫힌 플로트를 소개합니다. 이름에서 알 수 있듯이 플로팅 요소를 닫고 플로팅의 영향을 제거하는 것입니다. 현재 플로트를 제거하는 데 가장 일반적으로 사용되는 방법은 Clearfix입니다. 구체적으로 말하면, 바닥에 clear:both를 추가하는 대신 다음 CSS 줄을 삽입하세요.

<p class="news">
<img  src="/static/imghw/default1.png"  data-src="news-pic.jpg"  class="lazy"   / alt="CSS를 사용하여 부동 소수점을 지우는 방법에 대한 자세한 설명" >
<p>some text</p>
<p class="content">***</p>
</p>

위 내용은 CSS를 사용하여 부동 소수점을 지우는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!