float 속성 정리

NewBean 2022. 10. 21. 14:07

float 속성 정리

1. float 속성

- 요소를 정렬하기 위한 속성

2. float의 속성값

용어	설명
none	띄우지 않음 (기본값)
left	왼쪽에 띄움
right	오른쪽에 띄움
initial	기본값으로 설정
inherit	부모 요소로부터 상속

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="./test.css">
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>
</html>

.red {
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;		/* 박스를 왼쪽에 정렬함 */
}
.blue {
    width: 100px;
    height: 100px;
    background-color: blue;
    float : right;		/* 박스를 오른쪽에 정렬함 */
}