float 속성(clear, overflow)

float	float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다. ex)  img { float: left; margin-right: 20px; } ex) html <div class="page">     <header>                <h2></h2>                <p></P>     </header>     <navr>                <h2></h2>                <p></P>     </nav>     <sectionr>                <h2></h2>                <p></P>     </section>     <footer>                <h2></h2>                <p></P>     </footer> </div> css     div.page { border: 3px solid #CD5C5C; overflow: auto; }    /가장 바깥을 overflow로 막음     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; }   /nav의 float: left;영향받음     footer{ border: 3px ​​​​​​​solid #00FA9A; }                              /nav의 float: left;영향받음
clear	clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 줍니다. 컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어집니다. ex) html <div>      <div class="left"></div>      <div class="right"></div> <div>       <p>div에 clear 안하면 p는 위로 딸려 올라감</p> css     .left { background-color: #FF8C00; width: 150px; height: 50px; float: left; }     .right { background-color: #9932CC; width: 150px; height: 50px; float: right; }      p{clear: both}      or     div::after{display: block;clear: both;content: ""}     /div에 가상선택자를 만들어서 막아도 됨
overflow	float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 됩니다. 이때 overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커지게 됩니다. ex)     div { border: 3px solid #73AD21; padding: 5px;}     img { float: left; }     .good { overflow: auto; }
overflow-x	내용(content)의 크기가 해당 요소의 수평 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함.
overflow-y	내용(content)의 크기가 해당 요소의 수직 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함.

출처: tcpschool.com/css/css_position_float