[html] : after를 사용하여 부동 요소 지우기

Program / 글쓴이

나는 목록이 있고 Li는 float:left;. 이후 내용<ul> 은 올바르게 정렬되어야합니다. 따라서 다음을 만들 수 있습니다.

http://jsfiddle.net/8unU8/

나는 <div class="clear">: after와 같은 의사 선택기를 사용하여 제거 할 수 있다고 생각했습니다 .

그러나 예제는 작동하지 않습니다.

http://jsfiddle.net/EyNnk/

부동 요소를 지우려면 항상 별도의 div를 만들어야합니까?

답변

다음과 같이 작성하십시오.

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

http://jsfiddle.net/EyNnk/1/ 확인하십시오.

답변

아니요, 다음과 같이하는 것으로 충분하지 않습니다.

<ul class="clearfix">
  <li>one</li>
  <li>two></li>
</ul>

그리고 다음 CSS :

ul li {float: left;}


.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
}

답변

이것도 작동합니다.

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

.clearfix:after {
    clear: both;
}

/* IE 6 & 7 */
.clearfix {
    zoom: 1;
}

클래스 clearfix를 부모 요소에 제공 합니다.ul 요소)에 제공하십시오.

여기 와 여기에 소스 .

답변

텍스트 ‘dasda’는 절대 태그 안에 있지 않을 것입니다. 그렇죠? 의미 적으로 유효한 HTML이 되려면 clear 클래스를 추가하십시오.

http://jsfiddle.net/EyNnk/2/

답변

사용하다

.wrapper:after {
    content : '\n';
}

Roko가 제공하는 솔루션과 매우 유사합니다. : after 및 : before psuedo를 사용하여 콘텐츠를 삽입 / 변경할 수 있습니다. 자세한 내용은 http://www.quirksmode.org/css/content.html을 확인
하십시오.

답변