Float clearfix 방법 3가지

1. over-flow : hidden;

자식에게 float 속성을 주고,
부모에게 over-flow : hidden;을 적용시킨다.

.box1{overflow: hidden;}
.box1 li{float: left;}

2. clear: both;

자식에게 float 속성을 주고,
임시로 마크업 하나를 만든 후, 거기에 clear: both;를 적용시킨다.

//html
<li>1</li>
<li>2</li>
<li>3</li>
<div>clear</div>

//css
.box2 li{float: left;}
.box2 div{clear: both;}

3. ::after{}

float속성 적용할 부모요소 css에 ::after를 추가하여,
(after는 해당된 마크업 제일 마지막에 적용된다.)
그안에 content, display:block, clear:both를 적용시킨다.

.box3{}
.box3::after{content: ''; display: block; clear: both;}
.box3 li{}