CSS 속성에서 float 속성의 역할은 무엇입니까?

CSS에서 float 속성의 기능은 요소의 이동을 제어하는 ​​것입니다. 요소가 왼쪽이나 오른쪽으로 이동하더라도 그 주변의 요소도 요소의 수평 방향으로 재정렬됩니다. 요소는 왼쪽과 오른쪽으로만 이동할 수 있지만 위아래로 이동할 수는 없습니다. 플로팅된 요소는 바깥쪽 가장자리가 포함된 상자나 다른 플로팅된 상자의 테두리에 닿을 때까지 최대한 왼쪽이나 오른쪽으로 이동합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전, DELL G3 컴퓨터

css 속성에서 float 속성의 역할은 무엇인가요?

float, CSS의 속성, 주요 속성 값은 다음과 같습니다: left(왼쪽 부동), none(부동 없음), right(오른쪽 부동), 상속(부모 요소 부동 상속), 주로 웹 페이지 레이아웃에 사용됩니다. .

CSS Float는 요소를 왼쪽이나 오른쪽으로 이동하고 주변 요소도 재정렬됩니다.

Float는 이미지에 자주 사용되지만 레이아웃에도 매우 유용합니다.

요소가 부동하는 방법

요소가 수평으로 부동합니다. 이는 요소가 왼쪽과 오른쪽으로만 이동할 수 있고 위아래로 이동할 수 없음을 의미합니다.

부동 요소는 바깥쪽 가장자리가 포함 상자나 다른 부동 상자의 경계에 닿을 때까지 왼쪽이나 오른쪽으로 이동하려고 합니다.

플로팅된 요소 뒤의 요소가 이를 둘러쌉니다.

플로팅된 요소 이전의 요소는 영향을 받지 않습니다.

이미지가 오른쪽으로 떠 있으면 다음 텍스트 흐름이 이미지를 왼쪽으로 둘러쌉니다.

예

img
{
    float:right;
}

플로팅된 요소가 서로 옆에 위치합니다.

여러 개의 플로팅된 요소를 함께 배치하는 경우 공간이 있으면 , 그들은 서로 옆에 있을 것입니다.

여기서는 이미지 갤러리에 float 속성을 사용합니다.

예제

.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}

Clear float - Clear 사용

요소가 플로팅된 후 주변 요소가 재정렬됩니다. 이를 방지하려면 Clear 속성을 사용하세요. .

clear 속성은 플로팅 요소가 요소의 양쪽에 나타날 수 없음을 지정합니다.

clear 속성을 사용하여 텍스트에 그림 갤러리를 추가하세요:

Example

.text_line
{
    clear:both;
}

권장 학습: "css video tutorial"

위 내용은 CSS 속성에서 float 속성의 역할은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!