집 >웹 프론트엔드 >프런트엔드 Q&A >CSS에서 부동 소수점을 지우는 여러 가지 방법

CSS에서 부동 소수점을 지우는 여러 가지 방법

CSS에서 부동소수점을 지우는 여러 가지 방법

CSS에서는 부동소수점 요소가 자주 사용되는 레이아웃 방법이지만, 부동소수점 요소도 상위 요소의 높이 붕괴, 하위 요소의 오버플로 등의 문제를 일으킬 수 있으므로 다음과 같은 방법을 사용할 필요가 있습니다. 수레 청소.

다음은 부동 소수점을 지우는 몇 가지 실용적인 방법을 소개합니다.

1. 클리어 속성을 사용합니다.

클리어 속성은 다음 값을 가질 수 있습니다:

clear: 없음(기본값) 요소가 부동 요소를 지우지 않음을 나타냅니다.
clear: left는 요소 아래에 왼쪽 부동 요소가 허용되지 않음을 의미합니다. 즉, 왼쪽 부동 요소가 지워집니다.
clear: right는 오른쪽 부동 요소가 지워지지 않음을 의미합니다. 즉, 요소 아래에 허용됩니다. 즉, 오른쪽 부동 요소가 지워집니다.
명확함: 둘 다 요소 아래에 부동 요소가 허용되지 않음을 의미합니다. 즉, 왼쪽과 오른쪽 부동 요소가 동시에 지워집니다. : 다음 코드는 부동소수점 지우기 효과를 구현합니다.

<div class="parent">
  <div class="child left"></div>
  <div class="child right"></div>
  <div style="clear:both;"></div>
</div>

위 코드에서는 마지막 줄에 빈 div 태그를 추가한 다음 해당 스타일의 지우기 속성 값을 둘 다로 설정합니다. 요소가 설정되지 않은 경우 빈 태그일 뿐이므로 페이지 레이아웃에 영향을 미치지 않지만 플로팅 효과를 지울 수 있습니다.

위 코드를 개선하고 빈 div 태그를 클래스로 추상화합니다. 코드는 다음과 같습니다.

<div class="parent">
  <div class="child left"></div>
  <div class="child right"></div>
  <div class="clear"></div>
</div>

.clear {
  clear: both;
  height: 0;
  overflow: hidden;
}

위 코드에서는 스타일을 통해 height: 0; 빈 div 태그입니다. 페이지 레이아웃에 영향을 주지 않습니다.

2. 의사 요소 사용

CSS3에서는 아래와 같이 의사 요소를 사용하여 플로팅 효과를 지울 수 있습니다.

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

위 코드에서는 상위 요소에 Clearfix 클래스를 추가하고 의사 요소를 사용했습니다. 플로팅 효과를 지우려면 content: ''; display: table; 을 설정하여 플로팅 효과를 지웁니다.

3. 오버플로 속성을 사용하세요.

부모 요소의 오버플로 속성을 숨김, 자동 또는 스크롤로 설정하면 아래와 같이 부동 소수점을 지울 수도 있습니다.

.parent {
  overflow: hidden;
}

.parent {
  overflow: auto;
}

.parent {
  overflow: scroll;
}

위의 세 가지 스타일 설정으로 부동 소수점을 지울 수 있지만 플로팅 요소의 높이가 초과되었습니다. 상위 요소를 사용하면 스크롤 막대가 나타나 페이지의 아름다움과 유용성에 영향을 미칩니다.

4. BFC(블록 수준 서식 지정 컨텍스트) 사용

요소에 BFC 속성이 있는 경우 부동 요소를 지우는 효과를 얻기 위해 부동 요소를 내부에 래핑합니다.

.element {
  display: block; /* 块级元素 */
  overflow: auto; /* 触发BFC */
}

위의 코드에서는 display:block; Overflow:hidden; 또는 Overflow:auto; 속성을 삭제 및 부동화하여 BFC 효과를 트리거합니다.

요약하자면, 아름답고 합리적인 레이아웃 효과를 얻기 위해 실제 필요에 따라 플로트를 청소하는 다양한 방법을 선택할 수 있습니다.

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

성명：