CSS

[CSS] float

효땡 2024. 6. 1. 20:22

float

레이어 배치하기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <link rel="stylesheet" href="reset.css">
        <style>
            div {border: 2px solid deeppink; width: 100px; height: 100px;}
        <style>
    </head>
    
    <body>
        <div>BOX1</div>
        <div>BOX2</div>
        <div>BOX3</div>
        
        <div class="box4">BOX4</div>
    </body>
</html>

div 블럭요소의 세로 배치를 가로 배치로 변경

<!d=DOCTYPE html>
<html lang="ko">
    <head>
        <link rel="stylesheet" href="reset.css">
        <style>
            div {border: 1px solid plum; width: 100px; height: 100px; float: left;}
            .box {float: right;}
        </style>
    </head>
    
    <body>
        <div>BOX1</div>
        <div>BOX2</div>
        <div>BOX3</div>
        
        <div class="box4">BOX4</div>
    </body>
</html>