CSS Layout Float

 

- float 속성은 콘텐츠의 위치를 지정하고 형식을 지정하기 위해 사용한다.

  예를 들어, 이미지가 컨테이너의 텍스트 왼쪽에 떠 있도록 할 수 있다.

 

- float 속성은 다음과 같다.

  • left : 컨테이너 왼쪽에 떠있는다.

출처 : w3cshool CSS Float

  • right : 컨테이너 오른쪽에 떠있는다.

출처 : w3cshool CSS Float

  • none : 떠있지 않는다.

출처 : w3cshool CSS Float

  • inherit : 상위 요소의 float 값을 상속받는다.

 

실습 예제 - css_float.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            float: left;
            width: 300px;
            height: 300px;
        }
        .div1 {
            background-color: red;
            
        }
        .div2 {
            background-color: yellow;

        }
        .div3 {
            background-color: green;

        }
    </style>
</head>
<body>
    <h2>float 속성 이해하기</h2>
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
    <div class="div3">Div 3</div>
</body>
</html>

 

실습 예제 - css_float_clear.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            float: left;
            padding: 10px;
            border: 3px solid #73AD21;
        }
        .div2 {
            padding: 10px;
            border: 3px solid red;
        }
        .div3 {
            float: left;
            padding: 10px;
            border: 3px solid #73AD21;
        }
        .div4 {
            padding: 10px;
            border: 3px solid red;
            clear: left;
        }
    </style>
</head>
<body>
<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. 
However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. 
The value "left" clears elements floated to the left. 
You can also clear "right" and "both".</div>

</body>
</html>

 

 

Document

Without clear

div1
div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.


With clear

div3
div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".

 

저작자표시 비영리 변경금지

'Devlopment > HTML & CSS' 카테고리의 다른 글

[CSS] Layout 실습 코드  (1) 2024.01.07
[CSS] 레이아웃 위치 - Layout Position  (1) 2024.01.07
[CSS] 레이아웃 속성 - Layout Display  (0) 2024.01.07
[CSS] 표(Tables) 생성 및 속성 실습  (0) 2024.01.07
[CSS] 스타일 링크(Style Links)  (1) 2024.01.07

티스토리툴바