clear를 위해 overflow:auto;를 사용할 때 발생한 문제점

kukie.net 개편으로 인해 CSS를 이것저것 만지다가 발견했습니다.
원래 있었던 문제 인지는 잘 모르겠습니다.

문제:

키보드로 이동할 때 tab을 한번 더 먹음

알아보기

A영역의 코드를 보겠습니다. (일부 생략)

<li>
	낚이지 마세요..ㅎㅎ
	<img src="/images/nogravatar.png" alt="kukie's Gravatar" />
	<cite><a href="#">kukie</a> Says:</cite>
	<small><a href="#">November 16th, 2006 at 4:57 pm</a></small>
</li>

.commentlist {
	 list-style: none;
	 margin: 0;
	 padding: 0;
}
.commentlist li {
	 overflow: auto; /* 여깁니다 */
	 border-bottom: 1px dotted #CCC;
	 padding: 1em 0;
}
.commentlist p {
	 clear: both;
	 margin: 1em  0 0 0;
	 padding: 0;
}
.commentlist img {
	 display: block;
	 float: left;
	 margin: 0 10px 0 0;
	width: 40px;
	height: 40px;
	}
.commentlist cite {
	font-style: normal;
	display: block;
	}
.commentlist small {
	font-size: 0.8em;
	display: block;
}

.commentlist의 li에서 코멘트 내용이 나오고, 마지막에 그라바타 이미지와 글쓴이 등이 float 되도록 처리되어 있기 때문에 li 뒤에서 clear가 필요했습니다.
다른 오브젝트를 삽입하거나 핵을 쓰기는 싫어서 겉에 있는 li에 overflow:auto;를 줬지요.

작업을 다 끝내고 나서 키보드의 tab키를 마구 누르면서 브라우징을 하고 있었는데, 조금 이상한 점을 발견했습니다. tab키를 눌렀을 때의 포커스 순서가 “이름-날짜-다음 이름” 이렇게 넘어 가야 하는데, “이름-날짜-다음 li 블럭” 이런 형태로 넘어가더라고요.

한마디로 저로서는 쓸데 없는 tab 포커스의 영역이 하나 더 잡히고 있었습니다.
이 부분만의 문제가 아니라, clear를 위해서 overflow: auto;또는 hidden을 쓴 곳에서는 모두 같은 현상이 발생했습니다.
코멘트 부분의 문제는 작성자가 아래에 있는 것이 헷갈린다는 의견이 있어서 작성자를 위로 올리면서 간단하게 해결했고, 다른 부분들도 상황에 맞춰서 각각 다르게 손보았던 것 같습니다.
지금 저 부분의 코드만 따다가 예전의 코드로 수정해서 보면 또 그렇지 않은 것 같기도 하고..
다른 부분과 충돌이 생긴 것일 수도 있겠습니다.

혹시나 clearing을 위한 overflow:auto;를 사용하면서 이런 경우를 겪으신 적이 있나요?