CSS 플로트(플로팅)


CSS Float

CSS Float란 무엇인가요?

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

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





요소의 수평 방향은 부동합니다. 맞지만 안 일어나 그리고 아래로.

부동 요소는 바깥쪽 가장자리가 포함 상자나 다른 부동 상자의 경계에 닿을 때까지 왼쪽이나 오른쪽으로 이동하려고 합니다.

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

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

이미지가 오른쪽으로 떠 있는 경우 다음 텍스트 흐름이 이미지의 왼쪽으로 줄바꿈됩니다.

Instances

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
img 
{
	float:right;
}
</style>
</head>

<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="http://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

</html>

Run Instances»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

플로팅 요소 옆에

여러 개의 플로팅 요소를 함께 배치하면 공간이 있으면 서로 옆에 있게 됩니다.

여기에서는 이미지 갤러리에 float 속성을 사용합니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
</body>
</html>

인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

Clear float - 요소를 부동시키기 위해clear

를 사용한 후에는 주변 요소가 재배열됩니다. 이를 방지하려면 Clear 속성을 사용하세요.

clear 속성은 부동 요소가 요소의 양쪽에 나타날 수 없음을 지정합니다.

clear 속성을 사용하여 텍스트에 이미지 갤러리를 추가하세요.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
.text_line
{
	clear:both;
	margin-bottom:2px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">

<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">

<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">

<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
</body>
</html>

예제 실행»

온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요

예제 더 보기

이미지의 경우 테두리와 여백을 추가하고 단락 왼쪽에 떠 있습니다.

이미지에 테두리와 여백을 추가하고 단락 왼쪽에 떠 있습니다.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img 
{
	float:right;
	border:1px dotted black;
	margin:0px 0px 15px 20px;
}
</style>
</head>

<body>
<p>
	在下面的段落中,图像将向右浮动。黑色虚线边界添加到图像。
我们还添加了边缘的0 px的顶部和右侧 margin,15 px底部margin,和20 px左侧的margin的图像。使得文本远离图片:</p>
<p>
<img src="http://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>

인스턴스 실행 »

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

제목과 그림이 오른쪽에 떠있습니다.

제목과 그림이 오른쪽에 떠있게 하세요. ㅋㅋㅋ 단락 문자 왼쪽으로 부동

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div
{
	float:right;
	width:120px;
	margin:0 0 15px 20px;
	padding:15px;
	border:1px solid black;
	text-align:center;
}
</style>
</head>

<body>
<div>
<img src="http://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" /><br>
CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>
	在上面的段落中,div元素是120像素宽,它包含了图像。
	div元素会向右浮动。
	Margins 被添加到div使得文本远离div。
	Borders和padding被添加到div框架的图片和标题中
</p>
</body>

</html>

인스턴스 실행»

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

테이블 없이 웹페이지 만들기

float를 사용하여 만들기 웹페이지의 헤더, 바닥글, 왼쪽의 콘텐츠와 메인 콘텐츠입니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
span
{
	float:left;
	width:1.2em;
	font-size:400%;
	font-family:algerian,courier;
	line-height:80%;
}
</style>
</head>

<body>
<p>
<span>这</span>是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>

<p>
在上面的段落中, 第一个字嵌入在span 元素中。
这个 span 元素的宽度是当前字体大小的1.2倍。
这个 span 元素是当前字体的400%(相当大)， line-height 为80%。
文字的字体为"Algerian"。
</p>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

CSS의 모든 부동 속성

"CSS" 열의 숫자는 속성을 정의하는 다양한 CSS 버전(CSS1 또는 CSS2)을 나타냅니다.

PropertyDescriptionValueCSS
clear 요소 주위에 부동 요소가 허용되지 않도록 지정합니다. 왼쪽
그렇죠
둘 다
없음
상속		1
float상자(요소)가 부동될 수 있는지 여부를 지정합니다. 왼쪽
그렇죠
없음
상속		1
←
→