CSS 팁: 플로트 지우기

巴扎黑원래의: 2017-06-28 10:35:341467검색

CSSclear float이란 무엇인가요?

IE가 아닌 브라우저(예: Firefox)에서 컨테이너 높이가 자동이고 컨테이너 콘텐츠에 부동(플로트는 왼쪽 또는 오른쪽) 요소가 있는 경우, 이 경우 높이 컨테이너의 내용 높이에 맞게 자동으로 늘어날 수 없으므로 내용이 컨테이너 외부로 오버플로되어 레이아웃에 영향을 주거나 심지어 파괴할 수도 있습니다. 이러한 현상을 float Overflow라고 하며, 이러한 현상을 방지하기 위해 수행하는 CSS 처리를 CSS Clear Float라고 합니다.

W3C 예를 인용하면 뉴스 컨테이너는 부동 요소를 둘러싸지 않습니다.

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

.news img {
  float: left;
  }

.news p {
  float: right;
  }<p class="news"><img src="news-pic.jpg" /><p>some text</p></p>

Clear float 메소드

방법 1: 클리어 속성이 있는 빈 요소 사용

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

를 사용할 수도 있습니다.

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

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }<p class="news"><img src="news-pic.jpg" /><p>some text</p><p class="clear"></p></p>

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

단점: 의미 없는

html 요소를 많이 추가해야 하고, 코드가 충분히 우아하지 않으며 나중에 유지 관리가 쉽지 않습니다.

방법 2: CSS 오버플로 속성

을 사용하여 부동 요소의 컨테이너에 Overflow:hidden; 또는 Overflow:auto;를 추가하여 IE6에서 hasLayout을 트리거해야 합니다. 예를 들어 상위 요소에 대한 컨테이너를 설정하거나 확대/축소:1을 설정합니다.

오버플로 속성을 추가한 후 플로팅 요소가 컨테이너 레이어로 돌아와 컨테이너의 높이를 높여 플로팅 요소를 정리하는 효과를 얻습니다.

 some text

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

또한 플로팅 요소의 컨테이너에

float 속성을 추가하여 내부 플로트를 지웁니다. 전체적으로 플로팅되어 레이아웃에 영향을 미치므로 권장되지 않습니다.

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

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

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

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.content{
  clear:both;
  }<p class="news"><img src="news-pic.jpg" /><p>some text</p><p class="content"></p></p>

방법 5: CSS :after pseudo-element

를 :after pseudo-element와 결합하여 사용합니다(이것은 의사 클래스가 아니라 가장 가까운 요소를 나타내는 의사 요소라는 점에 유의하세요) 요소 뒤에) 및 IEhack은 현재의 모든 주요 주류 브라우저와 완벽하게 호환됩니다. 여기서 IEhack은 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; 
  }<p class="news clearfix"><img src="news-pic.jpg" /><p>some text</p></p>

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

요약

위의 예를 통해 float를 지우는 방법은 두 가지 범주로 나눌 수 있음을 쉽게 알 수 있습니다.

하나는 Clear 속성을 추가하는 것을 포함하여 Clear 속성을 사용하는 것입니다: Both 속성 부동 요소의 끝에서 빈 p는 요소를 닫는 데 사용됩니다. 실제로 :after 의사 요소를 사용하는 방법은 점의 내용과 클리어: 두 속성을 모두 추가하여 달성됩니다. 요소의 끝.

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

CSS 팁: 플로트 지우기

관련 기사