[WEB] CSS layout(float, overflow, clear 속성)

float 기반 layout 구성

<header>header</header>
<div id="wrap">
  <nav class="left">
    <ul>
      <li>menu</li>
      <li>home</li>
      <li>name</li>
    </ul>
  </nav>
  <div class="right">
    <h2>
      <span>반가워요!</span>
      <div class="emoticon">:-) </div>
    </h2>
    <ul>
      <li>crong</li>
      <li>pororo</li>
      <li>pobi</li>
      <li>rupy</li>
    </ul>
  </div>
</div>
<footer>footer</footer>

li {
  list-style: none;
}
header {
  background-color : #eee;
}
footer {
  background-color : #eee;
  clear: left;
}
#wrap {
  overflow: auto;
  margin: 20px 0;
}
.left, .right {
  float: left;
  height: 200px;
}
.left {
  width: 37%;
  margin-right: 3%;
  background-color : #a7c;
}
.right {
  width: 60%;
  text-align: center;
  background-color : #57c;
}
.right > h2 {
  position: relative;
}
.right .emoticon {
  position: absolute;
  top: 0px;
  right: 25%;
  color: #fff;
}

class 속성값으로 left, right를 갖는 요소에 float: left;를 적용시켰기 때문에 배치와 관계없이 화면에 떠있다고 인식되어 footer가 header 바로 밑에 붙게 된다.

이를 해결하기 위해 footer에 clear 속성을 적용시키면 위의 요소에 적용된 float 속성을 해제할 수 있다.

또한 자식요소가 float 속성을 가지고 있는 경우, 상위 요소가 해당 요소를 자식 요소로 인식을 하지 않는다.  

left, right를 클래스 속성값으로 갖는 요소가 있음에도 불구하고 상위 요소인 div의 height 속성이 0으로 나오는 것을 확인할 수 있다. 

이를 해결하기 위해서는 overflow 속성을 이용해서 float 요소를 둘러싸는 효과를 제거할 수 있다.

참고자료

https://www.edwith.org/

http://flexboxfroggy.com/#ko