• 코드:
​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
        p { clear: both; }
21
    </style>
22
</head>
23
​
24
<body>
25
​
26
    <h1>clear 속성을 이용한 위치 조정</h1>
27
    <div>
28
        <div class="left">왼쪽 끝에 위치하고 싶은 요소</div>
29
        <div class="right">오른쪽 끝에 위치하고 싶은 요소</div>
30
    </div>
31
    <p>이 글자를 아래쪽에 제대로 출력하고 싶어요!</p>
32
​
33
</body>
34
​
35
</html>