• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Float</title>
7
    <style>
8
        .left {
9
            background-color: #FF8C00;
10
            width: 150px;
11
            height: 50px;
12
            float: left;
13
        }
14
        .right {
15
            background-color: #9932CC;
16
            width: 150px;
17
            height: 50px;
18
            float: right;
19
        }
20
    </style>
21
</head>
22
​
23
<body>
24
​
25
    <h1>clear 속성을 이용한 위치 조정</h1>
26
    <div>
27
        <div class="left">왼쪽 끝에 위치하고 싶은 요소</div>
28
        <div class="right">오른쪽 끝에 위치하고 싶은 요소</div>
29
    </div>
30
    <p>이 글자를 아래쪽에 제대로 출력하고 싶어요!</p>
31
​
32
</body>
33
​
34
</html>