코드에서 파란색 요소만 float 속성을 적용하지 않았습니다. 실행결과를 개발자 도구로 살펴보면 그림처럼 표시됩니다. 파란색 요소가 사라진 것이 아니라 빨간색 요소 밑에 있습니다. float 속성이 적용된 요소는 자신의 원래 위치를 보장받지 못하기 때문입니다.

파란색 요소를 정상적으로 보이게 하려면 파란색 요소 바로 전에 있는 초록색 요소에 적용된 float 속성을 해제해야 합니다. 다음 코드처럼 파란색 요소에 clear 속성을 추가합니다. 이때 초록색 요소의 float 속성값이 left이니 clear 속성에도 left 값을 적용합니다.

.blue-box{
  background-color:blue;
  clear:left;
}

그림 6-68 실행결과

이제 파란색 요소는 다른 요소의 float 속성에 영향을 받지 않아 정상적으로 표시됩니다.