HTML+CSS Float(float)로 쉽게 시작하기

플로트란 무엇인가요?

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

요소가 부동하는 방법

요소가 수평으로 부동합니다. 이는 요소가 왼쪽 및 오른쪽으로만 이동할 수 있고 위아래로 이동할 수 없음을 의미합니다. 부동 요소는 바깥쪽 가장자리가 포함 상자나 다른 부동 상자의 테두리에 닿을 때까지 최대한 왼쪽이나 오른쪽으로 이동합니다.

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

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

이미지가 오른쪽으로 떠 있으면 아래 텍스트 흐름은 왼쪽으로 줄바꿈됩니다.

div{

float:right;

}

아래에서 예를 들어 보겠습니다. 예를 들어 배경이 다른 2개의 div가 있습니다

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动</title>
	<style type="text/css">
		/*在这里会用到id选择器*/
		div{
			width:600px;
			height:600px;
			border:1px solid black;
		}

		#dv1{
			width:100px;
			height:100px;
			background-color:green;
			float:left;
		}

		#dv2{
			width:100px;
			height:100px;
			background-color:red;
			float:left;
		}

	</style>
</head>
<body>
	<div>
		<div id='dv1'></div>

		<div id='dv2'></div>
	</div>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动</title> <style type="text/css"> /*在这里会用到id选择器*/ div{ width:600px; height:600px; border:1px solid black; } #dv1{ width:100px; height:100px; background-color:green; float:left; } #dv2{ width:100px; height:100px; background-color:red; float:left; } </style> </head> <body> <div> <div id='dv1'></div> <div id='dv2'></div> </div> </body> </html>

제출하다 코드 재설정

자동운전