:before, :after , clear: both; 가 어떤 동작을 하나요?

.clearfix:before, .clearfix:after {
content: " ";
display: table;
}

class명이 clearfix의 내부의 앞쪽과 뒤쪽에 display방식은 table으로, 내용은 빈칸 하나를 추가하라는 것입니다.
스샷에 ::before와 ::after가 저걸로 만들어진 것입니다.
content에 다른 글자를 넣으면 그 글자가 들어갑니다. html도 적용되요.

clear:both는 float를 초기화 시켜주는 것입니다.

float 스타일이 적용된 태그가 부모태그 밖으로 삐져나가서 페이지상의 다른 구성요소와 겹쳐보이는 문제를 막기 위해 부모태그에 clearfix를 적용합니다. 내 자식태그들은 모두 이 안에 갇혀있어야 해!! 라는 일종의 감옥인 셈인데요.

 

이런 CSS들은 디자인에만 영향을 줄 뿐, 로봇이 긁어가는 것과는 관계없을 거예요. 특정 스킨 사용시 날짜가 누락되는 문제가 있다면 CSS 문제보다는 전반적인 태그 구조가 너무 복잡하거나 순서가 잘못되었을 가능성이 높습니다. 예를 들어 날짜나 조회수를 표시하는 부분에 <ul> <li> 태그를 쓴다는 것부터가 저는 노이해입니다. 태그 해석에 있어서 굉장한 원칙주의를 고수하는 네이버 로봇이라면 <ul> <li> 태그는 "그냥 리스트"라고 생각할 것 같거든요.

.clearfix:before {
content: "앞에 이게뭐지?";
display: table;
}
.clearfix:after {
content: "뒤에 이게뭐지?";
display: table;
}
이렇게 작성해 보시면 알겁니다.
그냥 쉽게 접근하시면 됩니다.