CSS 배치 - float 와 clear

CSS float는 다른 요소가 주위에 배치 할 수 있도록 주어진 요소를 왼쪽 또는 오른쪽으로 밀어 놓는 것을 말합니다.

CSS float는 주로 이미지에 자주 사용되지만 레이아웃 작업을 할 때 또한 유용합니다.

float 속성

float 속성은 다음 중 하나로 사용될 수 있다.:

left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is default
inherit - The element inherits the float value of its parent

Example - float: right;

다음 예제는 이미지가 텍스트에서 오른쪽으로 이동되도록 지정합니다.:

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

Example

img {
float: right;
}

Try it Yourself »

Example - float: left;

다음 예제는 이미지가 텍스트에서 왼쪽으로 이동되도록 지정합니다.:

Example

img {
float: left;
}

Try it Yourself »

Floating Elements Next to Each Other

만약 몇 몇 플로팅된 요소들이 함께 놓인다면, 공간이 있는 경우, 서로 옆으로 플로팅 된다.

여기에서는 플로트 속성을 사용하여 이미지 갤러리를 만듬니다 :

Example

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

Try it yourself »

플로팅(Float) 해제 - Clear 속성 사용

플로팅 요소 다음의 요소는 주위를 흘러 다닐 것이다. 이 문제를 방지하려면, clear 속성을 사용합니다.

clear 속성은 요소 옆에 다른 플로팅 요소를 허용하지 않음을 지정합니다.

clear 속성을 사용하여 이미지 갤러리에 텍스트 줄을 추가한 예입니다. :

Example

div {
clear: left;
}

Try it yourself »

More Examples

An image with border and margins that floats to the right in a paragraph
Let an image float to the right in a paragraph. Add border and margins to the image.

An image with a caption that floats to the right
Let an image with a caption float to the right.

Let the first letter of a paragraph float to the left
Let the first letter of a paragraph float to the left and style the letter.

Creating a horizontal menu
Use float with a list of hyperlinks to create a horizontal menu.

Creating a homepage without tables
Use float to create a homepage with a header, footer, left content and main content.

All CSS Float Properties

Property	Description	Values
clear	Specifies which sides of an element where other floating elements are not allowed	left right both none inherit
float	Specifies whether or not a box should float	left right none inherit

« Previous Next Chapter »