float 프로퍼티란, '부유하다'라는 뜻.
블록 속성의 엘레먼트에 부유속성을 부여하여 레이아웃을 배치하는 방법이다.
자식 엘레먼트에 float: left를 사용하게 되면 부모영역이 높이값을 파악하지 못해 잘리는 문제가 발생하게 되는데!
이 때 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear) 하여 버그를 고쳐주는(fix) 코드가 필요한데 이것을 clearfix라고 한다.
<nav>
<h1>제목</h1>
<ul>
<li>1번</li>
<li>2번</li>
<li>3번</li>
</ul>
</nav>
h1 {
float: left
}
ul {
float: right
}
nav::after {
dispaly: block;
content: '';
clear: both;
}
clear: both; height: 0; overflow: hidden;
로 스타일을 지정하는 방법출처 및 참고
https://takeu.tistory.com/20