CSS 플로트 속성
정의 및 사용법
float 속성은 요소가 어느 방향으로 플로팅되는지 정의합니다. 이전에는 이 속성이 주로 이미지에 적용되어 텍스트가 이미지 주위로 둘러쳐지도록 했지만, CSS에서는 어떤 요소에도 플로팅할 수 있습니다. 플로팅 요소는 자신의 요소 유형에 관계없이 블록 레이아웃을 생성합니다.
浮动 비대체 요소를 사용할 때는 명확한 너비를 지정해야 합니다; 그렇지 않으면, 가능한 한 좁게 됩니다.
주의사항:浮动 요소에 대해 한 줄 이상의 공간이 매우 적을 때, 이 요소는 다음 줄로 이동하고, 이 과정은 이 줄에 충분한 공간이 있는 줄까지 지속됩니다.
추가로 참조:
CSS 강의:CSS 정위치
HTML DOM 참조 매뉴얼:cssFloat 속성
CSS 문법
float: none|left|right|initial|inherit;
속성 값
| 값 | 설명 |
|---|---|
| left | 요소는 왼쪽으로 플로팅됩니다. |
| right | 요소는 오른쪽으로 플로팅됩니다. |
| none | 기본 값. 요소는 플로팅되지 않으며, 텍스트에서 나타나는 위치에 표시됩니다. |
| inherit | 부모 요소에서 float 속성 값을 继承 정의해야 합니다. |
기술 세부 사항
| 기본 값: | none |
|---|---|
| thừa kế: | no |
| 버전: | CSS1 |
| JavaScript 문법: | object.style.cssFloat="left" |
TIY 예제
- float 속성의 간단한 사용법
- 단락의 오른쪽에 플로팅된 이미지
- 테두리와 경계가 있는 이미지를 단락의 오른쪽에 플로팅합니다
- 단락의 오른쪽에 플로팅된 이미지에 테두리와 경계를 추가합니다.
- 제목이 있는 이미지는 오른쪽에 플로팅됩니다
- 제목이 있는 이미지를 오른쪽에 플로팅합니다
- 단락의 첫 글자를 왼쪽에 플로팅합니다
- 단락의 첫 글자를 왼쪽에 플로팅하고, 이 글자에 스타일을 추가합니다.
- 수평 메뉴 생성
- 단일 줄 링크를 가진 플로팅을 사용하여 수평 메뉴를 생성합니다.
- 테이블 없는 첫 페이지 생성
- 헤더, 푸터, 왼쪽 목차 및 본문 내용을 가진 첫 페이지를 생성하기 위해 플로팅을 사용합니다.
브라우저 지원
표의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
