float 부모 높이 값 문제 해결하기

 

Float는 '뜨다'라는 의미가 있다. 이와 같이 float를 설정하면 해당 요소가 동동 뜨기 때문에, 부모가 요소의 높이를 파악하지 못하는 경우에 아래와 같이 해결할 수 있다.

문제 발생

Float를 자식 요소에 사용 시, 부모 요소가 자식의 높이값을 인식하지 못함.

HTML

<div class="container">
    <div></div>
</div>

CSS

.container{
    border: 8px solid red;
}
.container div{
    float: left;
    width: 200px;
    height: 200px;
    border: 8px solid blue;
}

문제 해결

clearfix라는 클래서에 float요소를 지우는 clear를 넣어 부모 요소에 적용한다.

HTML

<div class="container clearfix">
    <div></div>
</div>

CSS

.clearfix::after{
    content: "";
    clear: both;
    display: block;
}
.container{
     border: 8px solid red;
}
.container div{
    float: left;

    width: 200px;
    height: 200px;
    border: 8px solid blue;
}