부동 속성이란 무엇입니까?

float 속성에는 왼쪽, 오른쪽, 없음, 상속 등이 포함됩니다. 자세한 소개: 1. 왼쪽, 요소는 왼쪽으로 설정됩니다. 요소는 일반적인 문서 흐름에서 벗어나 왼쪽으로 이동하며 다른 요소는 오른쪽에 표시됩니다. , 요소는 오른쪽 및 왼쪽으로 부동합니다. 마찬가지로, 오른쪽으로 설정하면 요소가 일반 문서 흐름에서 벗어나 오른쪽으로 부동하고 다른 요소가 왼쪽에 표시될 수 있습니다. 요소는 부동되지 않으며 없음으로 설정하면 요소가 정상으로 돌아갑니다.

이 튜토리얼의 운영 체제: Windows 10 시스템, DELL G3 컴퓨터.

float 속성(float)은 CSS에서 일반적으로 사용되는 속성 중 하나이며, 페이지에서 요소의 부동 위치를 제어하는 ​​데 사용됩니다. 요소의 부동 속성을 설정하면 문서 흐름에서 요소를 꺼내 페이지에 자유롭게 배치할 수 있습니다. 이번 글에서는 float 속성의 다양한 값과 사용법을 소개하겠습니다.

float 속성의 값은 다음과 같습니다.

1. 왼쪽: 요소가 왼쪽으로 떠 있습니다. 왼쪽으로 설정하면 요소가 일반 문서 흐름에서 벗어나 왼쪽으로 이동하며 다른 요소가 오른쪽에 표시될 수 있습니다. 페이지가 플로팅 요소를 수용할 만큼 충분히 넓지 않으면 자동으로 래핑됩니다.

2. 오른쪽: 요소가 오른쪽으로 이동합니다. 왼쪽과 유사하게 오른쪽으로 설정하면 요소가 일반 문서 흐름에서 벗어나 오른쪽으로 이동하며 다른 요소가 왼쪽에 표시될 수 있습니다. 페이지가 플로팅 요소를 수용할 만큼 충분히 넓지 않으면 자동으로 래핑됩니다.

3. 없음: 요소가 부동되지 않습니다. 없음으로 설정하면 요소가 일반 문서 흐름 레이아웃으로 돌아가고 부동되지 않습니다. 기본값입니다.

4. 상속: 상위 요소의 부동 속성을 상속합니다. 상속하도록 설정된 경우 요소는 상위 요소의 부동 속성을 상속합니다. 상위 요소가 부동 속성을 설정하지 않으면 없음과 동일합니다.

플로팅 요소의 레이아웃 기능:

-플로팅 요소는 콘텐츠 너비에 맞게 자동으로 줄어들며 상위 요소의 전체 너비를 차지하지 않습니다.

- 플로팅된 요소는 컨테이너의 왼쪽이나 오른쪽에 최대한 가깝게, 다른 플로팅된 요소와 인접하게 배치됩니다.

- 플로팅된 요소의 너비가 상위 요소의 너비를 초과하면 자동으로 줄바꿈됩니다.

- 플로팅된 요소는 일반적인 문서 흐름에서 벗어나므로 플로팅되지 않은 후속 요소는 플로팅된 요소가 남긴 빈 공간을 채웁니다.

플로팅 요소의 적용 시나리오:

1. 다중 열 레이아웃 구현: 여러 요소를 플로팅 요소로 설정하면 다중 열 레이아웃을 구현할 수 있습니다. 예를 들어 여러 div 요소를 float: left로 설정하면 가로로 한 행에 정렬할 수 있습니다.

2. 그림 및 텍스트 주변 효과: 그림을 플로팅 요소로 설정하면 그림 주위에 텍스트가 둘러싸는 효과를 얻을 수 있습니다.

3. 탐색 메뉴: 탐색 메뉴의 목록 항목을 부동 요소로 설정하면 가로로 배열된 탐색 메뉴를 얻을 수 있습니다.

4. 반응형 레이아웃: 반응형 디자인에서는 다양한 화면 크기에서 플로팅 속성을 설정하여 다양한 기기에서 페이지의 적응형 레이아웃을 구현할 수 있습니다.

플로팅 요소로 인해 상위 요소의 높이가 축소될 수 있다는 점에 유의해야 합니다. 즉, 상위 요소는 플로팅 요소를 수용할 수 있도록 자동으로 확장될 수 없습니다. 이 문제를 해결하려면 상위 요소에 Clearfix 클래스를 추가하거나 다른 방법을 사용하여 부동 소수점을 지울 수 있습니다.

요약:

float 속성은 CSS에서 일반적으로 사용되는 레이아웃 속성입니다. float 속성을 설정하면 요소의 자유로운 위치 지정과 다중 열 레이아웃 효과를 얻을 수 있습니다. 그 값은 left, right, none 및 상속이며 각각 왼쪽으로 부동, 오른쪽으로 부동, 부동이 아님을 나타내며 상위 요소의 부동 속성을 상속합니다. 플로팅 요소는 다양한 레이아웃 효과를 얻을 수 있지만 상위 요소의 높이가 무너질 수 있는 문제에 주의해야 합니다.

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