float 해제

1) 부모요소 height부여: 일종의 눈속임 방법으로 자식요소와 부모요소가 고정된 높이 값일 때 가능

2) 부모의 요소의 float 속성: 이 방법은 부모요소가 float이 되어 있을 때, 자식 요소가 float 이 부여된다 해도 따로 해제하지 않아도 됨을 의미합니다. 따라서, 자식 요소의 float을 해결하기 위해 부모요소에 의미 없는 float의 부여는 좋지 않다고 할 수 있습니다.

3) overflow(visible)를 이용한 해제 : 부모 요소에 float을 제외한 overflow를 적용하면 되는 아주 간단한 방법입니다. 하지만, 이 방법은 부모 요소의 크기를 넘기는 자식 요소가 있는 경우에는 절대 사용하시면 안 됩니다!

4) 인접 형제요소의 clear 속성을 이용한 해제 : clear 속성은 floating을 해제해주는 속성입니다. 인접 형제 요소에 빈 태그를 추가하고, 이에 clear 속성을 줌으로써 floating을 해제하면 됩니다! 단점이 있다면, 빈 태그를 추가하는 점 때문에 시맨틱적인 측면에서 번잡하다는 느낌을 줄 수 있습니다.

5) 가상요소를 이용한 clear 속성을 이용한 해제 : ':after'를 활용해서, 자식 요소의 맨 마지막에 오도록 위치시키고, clear 속성을 주어서 floating을 해제시킵니다. 이는 가장 컨텐츠 사이즈 등에 유연하게 대처도 가능하므로 가장 보편적으로 사용되는 방법