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

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

---

나는 목록이 있고 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요소)에 제공하십시오.

여기 와 여기에 소스 .

---

The text 'dasda' will never not be within a tag, right? Semantically and to be valid HTML it as to be, just add the clear class to that:

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

---

Use

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

Much like solution provided by Roko. It allows to insert/change content using : after and :before psuedo. For details check http://www.quirksmode.org/css/content.html

참고URL : https://stackoverflow.com/questions/10699343/using-after-to-clear-floating-elements