만약 그림 6-64처럼 자식 요소가 부모 요소에 감싸져 있는 형태라면 ::after 가상 요소 선택자로 clear 속성을 적용할 수도 있습니다.
.parent::after{
content:""; /* 빈 콘텐츠를 만듭니다. */
display:block; /* 박스 모델 성격을 블록 성격으로 변경합니다. */
clear:left; /* clear 속성으로 float 속성의 left 값을 해제합니다. */
}
이 방식으로 float-ex1.html 파일의 문제를 해결해 보겠습니다.
06/05/clear-solved-2.html
.container::after{
content:"";
display:block;
clear:both;
}
그림 6-69 실행결과
코드를 실행해 보면 부모 요소가 자식 요소를 제대로 인식합니다.