CSS 플로트(플로팅)

CSS Float

CSS Float란?

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

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

요소가 부동하는 방식

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

부동 요소는 바깥쪽 가장자리가 포함 상자나 다른 부동 상자의 테두리에 닿을 때까지 최대한 왼쪽이나 오른쪽으로 이동합니다.

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

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

CSS 부동 부동 속성

이 글에서는 요소가 부동하는 방향을 정의하는 부동 속성을 주로 소개합니다.

1. 페이지 레이아웃 방법: 문서 흐름, 플로팅 레이어 및 플로트 속성을 소개합니다.

2. float:left: float가 남은 경우의 레이아웃 방법을 소개합니다.

3. float:right: float가 올바른 경우의 레이아웃 방법을 소개합니다.

4. 인접 요소에 부동 속성이 포함되어 있는 경우: 인접 요소에 부동 속성이 포함되어 있는 경우 레이아웃 방법을 소개합니다.

1. 페이지 레이아웃 방법

페이지 레이아웃 방법에는 주로 문서 흐름, 플로팅 레이어, 플로트 속성이 포함됩니다.

1.1 문서 흐름

HTML 페이지의 표준 문서 흐름(기본 레이아웃)은 위에서 아래로, 왼쪽에서 오른쪽으로, 블록(블록 수준 요소)이 나타나면 줄 바꿈이 있습니다. .

1.2 플로팅 레이어

플로팅 레이어: 요소의 float 속성에 값을 할당한 후 문서 흐름에서 분리되어 왼쪽과 오른쪽 테두리에 가깝게 왼쪽과 오른쪽으로 떠다닙니다. 상위 요소(기본값은 본문 텍스트 영역)입니다.

플로팅 요소는 문서 흐름의 비어 있는 위치에 있는 후속(비플로팅) 요소로 채워집니다. 블록 수준 요소는 플로팅 요소의 범위와 겹치면 직접 채워집니다. 요소는 블록 수준 요소를 덮습니다. 인라인 요소: 공백이 있으면 삽입합니다.

1.3 부동 속성 소개

　① 왼쪽: 요소가 왼쪽으로 부동합니다.

　② 오른쪽: 요소가 오른쪽에 떠 있습니다.

　 ③ 없음: 기본값입니다.

　 ④ 상속: 상위 요소에서 float 속성을 상속받습니다.