하위 엘리멘트에 float 속성을 주었을때

Float 속성을 사용하여 배치를 하게되면

 

주위에 엘리먼트에도 영향을 끼치게된다.

<div class="container">
      <div>하나</div>
      <div>둘</div>
      <div>셋</div>
</div>
<footer></footer>

 

여기에 

 

.container > div {
        background-color: black;
        width: 100px;
        height: 100px;
        margin: 0.5rem;
        color: #fff;
        float: left;
}

float 속성으로 left를 주었다면 상위 엘리먼트에는 overflow : hidden 혹은 auto를 주어야한다.

 

.container {
        background-color: goldenrod;
        padding: 10px;
        width: 400px;
        height: 200px;
        box-sizing: border-box;
        overflow: hidden;
}

 

제일 아래 엘리먼트(footer)에서는 상위의 값을 인식해야 하기때문에

clear : left, 혹은 both를 통해 떠있는 속성에서 클리어를 해준다.

 

footer {
        width: 400;
        height: 100px;
        background-color: green;
        margin-top: 0.5rem;
        clear: both;
}

 

전체는 이런식이다

    .container {
        background-color: goldenrod;
        padding: 10px;
        width: 400px;
        height: 200px;
        box-sizing: border-box;
        overflow: hidden;
      }
 
      .container > div {
        background-color: black;
        width: 100px;
        height: 100px;
        margin: 0.5rem;
        color: #fff;
        float: left;
      }
 
      footer {
        width: 400;
        height: 100px;
        background-color: green;
        margin-top: 0.5rem;
        clear: both;
      }