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 속성은 플로팅 요소가 요소의 양쪽에 나타날 수 없음을 지정합니다.

지속적인 학습

새로운 파일

<!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: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>

코드 재설정

자동운전

제출하다

시사 Clear