만약 자식요소가 float를 가진 경우 해당 엘리먼트는 높이값을 갖지 못합니다. 이런 이유때문에 이를 해결하기 위한 방법으로 몇 가지가 존재합니다. 그 중 가장 효과적인 방법으로 pseudo 선택자를 사용하는 방법이 있습니다.



# Pseudo 선택자를 사용하여 float 자식요소에 대한 영역을 갖기

먼저 아래와 같은 엘리먼트가 그 예에 해당합니다. 먼저 html 태그입니다.
<div class="wrapper">
  <div class="pull-left">
    Test Square
  </div>
</div>

아래는 css 코드입니다.
​​​​​​​
.wrapper {
  border: 5px solid #999;
  padding: 10px;
}
.wrapper .pull-left {
  float: left;
  width: 100px;
  height: 100px;
  background: #e9e9e9;
  border: 1px solid #cdcdcd;
}

이제 아래와 같이 css를 추가합니다.

.wrapper::before {
  content: '';
  display: table;
  box-sizing: border-box;
  clear: both;
}
.wrapper::after {
  content: '';
  display: table;
  box-sizing border-box;
}

이제 위 예제는 아래처럼 영역을 가지게 됩니다. 이처럼 css를 사용하는 방법은 매우 간단하게 사용할 수 있습니다.