CSS 플로트(플로팅)
플로트란 무엇인가요?
float는 부동형입니다. CSS에서 float의 기능은 요소를 일반 문서 흐름에서 꺼내어 상위 요소의 "가장 왼쪽" 또는 "가장 오른쪽"으로 이동하는 것입니다. 다음은 이 정의에 포함된 여러 명사의 개념을 설명합니다.
문서 흐름: HTML에서 문서 흐름은 요소가 위에서 아래로 배열되는 순서입니다.
문서 흐름에서 벗어남: 요소가 정상적인 순서에서 벗어났습니다.
가장 왼쪽/가장 오른쪽: 위에서 언급한 상위 요소의 가장 왼쪽 및 가장 오른쪽으로의 이동은 요소가 다른 플로팅 요소 또는 상위 요소의 콘텐츠 영역 경계(패딩 제외)에 닿을 때까지 왼쪽 또는 오른쪽으로 이동한다는 의미입니다. ).
float 속성:
① left: 요소가 왼쪽으로 부동합니다.
② 오른쪽: 요소가 오른쪽으로 떠있습니다.
③ 없음: 기본값입니다.
④ 상속: 상위 요소의 float 속성을 상속받습니다.
예: 왼쪽으로 플로팅
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>float属性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
float:left;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>예: 오른쪽으로 플로트
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>float属性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
float:right;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
float:right;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>플로팅 요소를 나란히 배치
여러 개의 플로팅 요소를 함께 배치하면 공간이 있으면 서로 옆에 있을 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>float属性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
div
{
float:left;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>clear float -clear
를 사용하여 요소를 플로팅한 후 주변 요소가 재정렬됩니다. 이를 방지하려면 Clear를 사용하세요. 기인하다 .
clear 속성은 플로팅 요소가 요소의 양쪽에 나타날 수 없음을 지정합니다.
