CSS에서 float는 무엇을 의미합니까?-CSS 튜토리얼-php.cn

CSS에서 float는 무엇을 의미합니까?

醉折花枝作酒筹

풀어 주다： 2023-01-07 11:43:16

원래의

5388명이 탐색했습니다.

CSS 플로트는 문서 흐름에서 요소를 가져와 왼쪽이나 오른쪽으로 이동하고 주변 요소를 재정렬하는 방법입니다. Float는 이미지에 자주 사용되지만 레이아웃에도 매우 유용합니다.

CSS에서 float는 무엇을 의미합니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

소위 CSS 플로팅은 플로팅 요소가 문서의 일반적인 흐름에서 벗어나 외부 경계가 상위 요소의 내부 경계에 닿을 때까지 플로트 값에 따라 왼쪽이나 오른쪽으로 이동한다는 의미입니다. 다른 부동 요소의 외부 경계.

A 요소가 부동 상태이고 요소 이후에 원래 순위가 매겨진 요소가 A 요소가 더 이상 문서 흐름에 없음을 발견하면 이를 무시하고 A 요소 앞의 요소로 이동합니다(PS: 하지만 텍스트는 이를 무시하지 않습니다. 즉, A 요소는 텍스트 흐름에서 벗어나지 않습니다.

CSS에서 float는 무엇을 의미합니까?

CSS Float는 요소를 왼쪽이나 오른쪽으로 이동하고 요소는 그 주위로 이동합니다. 또한 재정렬됩니다. 는 이미지에 자주 사용되지만 레이아웃에도 매우 유용합니다.

플로트를 사용하여 문서 흐름에서 벗어날 때 다른 상자는 이 요소를 무시하지만 다른 상자의 텍스트는 여전히 유지됩니다. 이 요소를 위한 공간을 확보하고 둘러쌉니다. (부분적으로 무시되었다고 할 수 있습니다.)

플로팅 상자가 문서의 일반적인 흐름에 있지 않기 때문에 문서의 일반적인 흐름에 있는 블록 수준 요소는 다음과 같이 동작합니다. 플로팅 요소가 존재하지 않는 경우

위치:절대에서는 문서와 분리됩니다. 유동 요소, 다른 상자 및 다른 상자의 텍스트는 이를 무시합니다.

플로팅 요소:

요소의 가로 방향을 의미합니다. 요소는 왼쪽과 오른쪽으로만 이동할 수 있으며 위쪽과 아래쪽으로는 이동할 수 없습니다.

플로팅 요소는 바깥쪽 가장자리가 포함된 상자나 다른 플로팅된 상자에 닿을 때까지 왼쪽이나 오른쪽으로 이동합니다.

플로팅된 요소 뒤의 요소는 해당 요소를 둘러쌉니다.

플로팅된 요소 앞의 요소는 영향을 받지 않습니다. 이미지가 오른쪽으로 플로팅된 경우 다음 텍스트 흐름이 이미지의 왼쪽으로 래핑됩니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>HTML中文网</title>
<style>
img 
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img  src="logocss.gif"    style="max-width:90%"  style="max-width:90%" / alt="CSS에서 float는 무엇을 의미합니까?" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>

로그인 후 복사

렌더링:

추천 학습: CSS에서 float는 무엇을 의미합니까? css 비디오 튜토리얼