CSS에서 부동 소수점의 일반적인 사용 및 부동 소수점 지우기에 대한 소개(코드 예)

이 기사는 CSS에서 부동 소수점의 일반적인 사용법과 부동 소수점 지우기(코드 예제)를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. .

부동 소수점은 CSS에서 비교적 성가신 속성이며 일반적으로 부동 소수점을 지우는 작업을 동반합니다. 오늘은 플로트를 함께 고쳐보겠습니다.

일반적인 사용법

사실 요소를 부동으로 설정하면 달성되는 효과는 다음과 같습니다.

#🎜 🎜#

많은 잡지에서 이러한 레이아웃을 왼쪽이나 오른쪽에 사용하고 텍스트 줄 바꿈 효과를 사용했을 것입니다.

floating의 또 다른 일반적인 사용법은 다음과 같습니다:

즉, 특정 줄 내 특정 부분을 오른쪽 정렬하려면 일반적으로 여백을 사용하지 않지만 부동 소수점을 사용합니다.

플로팅으로 인한 문제

플로팅 요소가 상위 요소를 지원할 수 없어 높이가 무너질 수 있습니다! !

다음 예를 살펴보세요.

<div>
  <div></div>
  <div></div>
</div>

.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}

더 큰 경우 블록이 떠 있으면 상위 요소를 열 수 없다는 것을 알 수 있습니다. 일반적으로 이는 혼란스러운 레이아웃으로 이어지기 때문에 우리가 원하는 것이 아닙니다. 이는 상위 요소 내의 모든 하위 요소가 부동 상태이고 상위 요소의 높이가 0으로 축소되는 경우 특히 분명합니다.

clear float

따라서 float를 사용할 때 float를 사용하는 것을 원하지 않습니다. 이런 일이 발생하면 플로트를 클리어해야 합니다.

플로트를 지우는 방법은 여러 가지가 있을 수 있지만 지금은 다음과 같은 방법이 더 많이 사용됩니다.

먼저 다음 CSS를 추가하세요.

.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

# 🎜🎜#그런 다음 clearfix

클래스를 상위 컨테이너에 추가합니다. 최종 코드는 다음과 같습니다.

<div>
  <div></div>
  <div></div>
</div>

.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}
.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

얻는 효과는 다음과 같습니다. : #🎜🎜 #

플로팅 요소는 상위 컨테이너의 높이를 확장할 수 있습니다! Summary

플로팅 요소는 상위 컨테이너의 높이를 확장할 수 없으므로 플로트를 지워야 합니다.

#🎜 🎜##🎜 🎜#

Floating은 올바른 정렬을 쉽게 얻을 수 있습니다.
플로팅을 사용하면 쉽게 텍스트 줄바꿈 효과를 얻을 수 있습니다.
따라서 플로팅의 사용 시나리오에 주의하고, 필요할 때 플로팅을 클리어하면 플로팅 우물을 제어할 수 있습니다

• #🎜 🎜#

위 내용은 CSS에서 부동 소수점의 일반적인 사용 및 부동 소수점 지우기에 대한 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!