플로트 란 무엇입니까? float 속성에 대한 자세한 설명

플로트란 무엇인가요? 왜 float를 사용합니까? 이 기사에서는 float가 무엇인지 소개하고 레이아웃에서 float의 역할과 float를 지우는 방법을 설명합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 알아보겠습니다. float가 무엇인가요?

float는 CSS의 위치 지정 속성입니다. 그 목적과 유래를 이해하기 위해 타이포그래피 디자인을 살펴볼 수 있습니다. 인쇄 조판기에서는 텍스트가 원하는 대로 페이지 주위를 둘러싸도록 이미지를 페이지에 설정할 수 있습니다. 이를 종종 "텍스트 줄 바꿈"이라고 합니다. 예를 들면 다음과 같습니다.

페이지 레이아웃 프로그램에서 텍스트가 들어 있는 상자는 텍스트 줄 바꿈을 따르거나 무시하도록 지시할 수 있습니다. 텍스트 줄바꿈을 무시하면 이미지 위에 단어가 마치 존재하지도 않는 것처럼 표시됩니다. 이는 이미지가 페이지 흐름의 일부인지 여부의 차이입니다. 웹 디자인은 매우 유사합니다.

웹 디자인에서 CSS float 속성이 적용된 페이지 요소는 인쇄 레이아웃에서 주변에 텍스트가 있는 이미지처럼 작동합니다. 플로팅 요소는 여전히 웹페이지 흐름의 일부입니다. 이는 절대 위치에 있는 페이지 요소를 사용하는 것과 크게 다릅니다. 인쇄 조판기의 텍스트 상자에 페이지 줄 바꿈을 무시하도록 지시하는 것과 마찬가지로 절대적으로 배치된 페이지 요소는 웹 페이지 흐름에서 제거됩니다. 절대적으로 배치된 페이지 요소는 다른 요소의 위치에 영향을 주지 않으며, 서로 닿는지 여부에 관계없이 다른 요소도 영향을 주지 않습니다.

CSS를 사용하여 요소에 부동 소수점을 설정하면 다음과 같이 발생합니다.

.demo {
  float: right;			
}

부동 속성에는 다음과 같은 4개의 유효한 값이 있습니다.

왼쪽: 요소를 왼쪽으로 부동하도록 설정합니다.

오른쪽: 요소를 설정합니다. 오른쪽으로 부동

없음: 기본값, 부동이 아닌 요소를 설정합니다.

inherit: 부동 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

왜 float를 사용하나요?

플로팅은 작은 영역의 레이아웃에도 도움이 됩니다. 예를 들어 웹페이지의 이 작은 영역을 살펴보겠습니다. 작은 아바타 이미지에 float를 사용하면 해당 이미지의 크기가 변경되면 상자의 텍스트가 맞게 리플로우됩니다.

컨테이너의 상대 위치 지정과 아바타 레이아웃의 절대 위치 지정을 사용하여 동일한 결과를 얻을 수 있습니다. 이렇게 하면 텍스트가 아바타의 영향을 받지 않으며 크기가 변경될 때 리플로우될 수 없습니다.

왜 float를 클리어해야 할까요?

float(플로팅)을 사용하면 일반 흐름에서 요소를 제거하고 그 옆에 다른 요소가 표시되므로 후속 요소가 위로 이동하는 것을 방지하려면(아래 그림과 같이 바닥글이 위로 이동하는 것을 방지) ), 이것이 필요합니다. 지우세요. 바닥글의 부동을 지워 두 개의 부동 열 아래에 있는지 확인해야 합니다. 이 문제를 해결하려면 Clear 속성을 사용해야 합니다.

.footer {
  clear: both;
}

clear 속성에는 다음과 같은 5개의 유효한 값이 있습니다.

left: 왼쪽에 떠 있는 지우기 요소입니다.

right: 오른쪽에 떠 있는 명확한 요소.

both: 왼쪽과 오른쪽 모두에 떠 있는 클리어 요소입니다.

none: 기본값, 부동 요소가 양쪽에 나타날 수 있도록 허용합니다. 일반적으로 명확한 값이 캐스케이드에서 제거되지 않는 한 불필요한 값입니다.

inherit: 이 설정은 Clear 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

요약: 위의 내용은 모두의 연구에 도움이 되기를 바랍니다.

위 내용은 플로트 란 무엇입니까? float 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!