CSS float 속성
예시
이미지가 오른쪽으로 뜨게 하십시오.
img
{
float: right;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
이 float
속성은 요소가 왼쪽, 오른쪽으로 떠 있어야 하는지 아니면 전혀 떠 있지 않아야 하는지를 지정합니다.
참고: 절대 위치 요소는 float
속성을 무시합니다!
참고: 부동 요소 옆에 있는 요소는 주위를 흐릅니다. 이를 방지하려면 clear 속성이나 clearfix 핵을 사용하십시오(이 페이지 하단의 예 참조).
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS 구문
float: none|left|right|initial|inherit;
속성 값
Value | Description | Play it |
---|---|---|
none | The element does not float, (will be displayed just where it occurs in the text). This is default | |
left | The element floats to the left of its container | |
right | The element floats the right of its container | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
더 많은 예
예시
이미지를 왼쪽으로 띄우십시오.
img
{
float: left;
}
예시
이미지가 텍스트에서 발생하는 바로 그 위치에 표시되도록 하십시오(float: 없음):
img
{
float: none;
}
예시
단락의 첫 글자를 왼쪽으로 띄우고 글자의 스타일을 지정합니다.
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
예시
수평 메뉴를 만들려면 하이퍼링크 목록과 함께 float를 사용하십시오.
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
예시
float를 사용하여 머리글, 바닥글, 왼쪽 콘텐츠 및 주요 콘텐츠가 있는 홈페이지를 만듭니다.
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
예시
지정된 <p> 요소의 왼쪽 또는 오른쪽에 부동 요소를 허용하지 마십시오.
img {
float: left;
}
p.clear {
clear: both;
}
예시
플로팅 요소가 포함하는 요소보다 키가 크면 컨테이너 외부에서 오버플로됩니다. "clearfix hack"으로 이 문제를 해결할 수 있습니다.
.clearfix::after {
content: "";
clear: both;
display: table;
}
관련 페이지
CSS 튜토리얼: CSS 플로트
HTML DOM 참조: cssFloat 속성