CSS) Float Layout and Clear(clearfix)

float를 사용해서 레이아웃을 짜다보면 영역이 깨져서 요소의 위치가 뒤죽박죽이 되곤 한다. 그럴땐 float를 준 요소의 부모요소에 clear 속성을 부여해주면 해결된다. 이러한 기능의 클래스 이름을 보통 clearfix라고 쓰는 것 같다.


.clearfix::before, .clearfix::after {display: block; content: ''; clear: both;}

• ::before와 ::after는 해당 요소 안, 앞뒤로 가상의 영역을 만들어준다. 
• display: block과 content: ''는 가상의 영역을 실체로 만들어준다고 생각하면 될 것 같다. 
• clear: both는 해당 요소의 좌우에 다른 블록이 올 수 없게 하는 것. 

즉 clearfix는 영역의 위아래에 구분선을 그어주는 역할인 것 같다.