1. float 속성

---

• float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 준다.

• 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용된다.

<p><img src="/examples/images/img_flower.png" alt="flower" width="245" height="185">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Nam ornare sapien suscipit tincidunt ullamcorper...</p>

img {
    float: left;
    margin-right: 20px;
}

2. clear 속성

---

• clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 준다.

• 컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어진다.

• 따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해줘야 한다.

<div>
  <div class="left">왼쪽 끝에 위치하고 싶은 요소</div>
  <div class="right">오른쪽 끝에 위치하고 싶은 요소</div>
</div>
<p>이 글자를 아래쪽에 제대로 출력하고 싶어요!</p>

.left {
    background-color: #FF8C00;
    width: 150px;
    height: 50px;
    float: left;
}

.right {
    background-color: #9932CC;
    width: 150px;
    height: 50px;
    float: right;
}

p {
    clear: both;
}

• p 태그에 clear 속성 지정을 하지 않을 경우

• p 태그에 clear 속성 지정해준 경우

3. overflow 속성

---

• float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 넘치게 된다.

• 이때 overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커지게 된다.

<div>이미지와 함께 하고 싶은 내용
  <img src="/examples/images/img_flower.png" alt="flower" width="245" height="185">
</div>
<p id="second"><br>overflow 속성값을 auto로 주면 자동으로 컨테이너 요소의 크기도 함께 늘어납니다!</p>
<div class="good">이미지와 함께 하고 싶은 내용
  <img src="/examples/images/img_flower.png" alt="flower" width="245" height="185">
</div>

div {
    border: 3px solid #73AD21;
    padding: 5px;
}

img {
    float: left;
}

#second {
    clear: left;
}

.good {
    overflow: auto;
}

4. float 속성을 이용한 레이아웃

---

<div class="page">
  <header>
    <h2>header 영역</h2>
  </header>
  <nav>
    <h2>nav 영역</h2>
    <p>여기에는 보통 메뉴가 들어갑니다.</p>
  </nav>
  <section>
    <h2>section 영역</h2>
    <p>여기에는 페이지에 해당하는 내용이 들어갑니다.<br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </p>
  </section>
  <footer>
    <h2>footer 영역</h2>
  </footer>
</div>

div.page {
    border: 3px solid #CD5C5C;
    overflow: auto;
}

h2 {
    text-align: center;
}

header {
    border: 3px solid #FFD700;
}

nav {
    border: 3px solid #FF1493;
    width: 150px;
    float: left;
}

section {
    border: 3px solid #00BFFF;
    margin-left: 156px;
}

footer {
    border: 3px solid #00FA9A;
}