CSS의 float 속성은 무엇입니까? 세 가지 가치는 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS의 float 속성은 무엇입니까? 세 가지 가치는 무엇입니까?

Dec 10, 2021 pm 12:16 PM

css

CSS에서 부동 속성은 요소가 부동하는 방향을 정의하는 데 사용되는 "float"입니다. 해당 속성 값은 다음과 같습니다. 1. 요소가 왼쪽으로 부동하도록 정의하는 "left"; 2. "right"는 요소가 부동하는 방향을 정의합니다. 3. "none"은 요소가 부동하지 않는 것을 정의합니다.

CSS의 float 속성은 무엇입니까? 세 가지 가치는 무엇입니까?

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

CSS에서 float 속성은 "float"이며, 요소가 부동하는 방향을 정의하는 데 사용됩니다.

과거에는 텍스트가 이미지를 둘러싸도록 하기 위해 항상 이미지에 이 속성이 적용되었지만 CSS에서는 모든 요소를 플로팅할 수 있습니다. 부동 요소는 요소 유형에 관계없이 블록 수준 상자를 만듭니다.

대체되지 않은 부동 요소의 경우 명시적인 너비를 지정하세요. 그렇지 않으면 최대한 좁아집니다.

참고: 행에 부동 요소를 위한 공간이 거의 없으면 요소는 다음 행으로 점프하고 이 프로세스는 특정 행에 충분한 공간이 생길 때까지 계속됩니다.

float 속성의 세 가지 속성 값:

left 요소가 왼쪽으로 떠 있습니다.
right 요소가 오른쪽에 떠 있습니다.
none 기본값입니다. 요소는 부동되지 않으며 텍스트에 나타나는 위치에 나타납니다.

예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			li{
				background-color: pink;
			}
			.ex1 li {
				float: left;
				margin: 10px;
			}

			.ex2 li{
				float: right;
				margin: 10px;
			}
			.ex3 li{
				float: none;
				margin: 10px;
			}
			div{
				clear: both;
			}
		</style>
	</head>

	<body>
		<ul class="ex1">
			<li>项目1</li>
			<li>项目2</li>
		</ul>
		<div></div>
		<ul class="ex2">
			<li>项目1</li>
			<li>项目2</li>
		</ul><div></div>
		<ul class="ex3">
			<li>项目1</li>
			<li>项目2</li>
		</ul><div></div>
	</body>
</html>

로그인 후 복사

CSS의 float 속성은 무엇입니까? 세 가지 가치는 무엇입니까?