clearfix가 실제로 작동하는 방법에 대한 혼란

컨테이너 요소 안에 부동 요소가있는 경우 컨테이너를 overflow auto으로 설정하거나 floated 요소 뒤에 clear both을 추가해야합니다.clearfix가 실제로 작동하는 방법에 대한 혼란

이는 컨테이너 내에 떠 다니는 요소를 지우는 것처럼 의미가 있습니다.

clearfix CSS 속임수를 사용할 때 컨테이너 뒤에있는 것이 아니라 떠 다니는 요소 뒤에있는 것입니다 ... 이제는 컨테이너가 아닌 플로팅을 지우는 것처럼 이것이 어떻게 작동하는지 혼란 스럽습니다. 틀림없이 컨테이너가 여전히 dodgy 높이를 가지게할까요? 왜냐하면 물리적 인 요소가있는 컨테이너 뒤에 clear both을 넣으면 작동하지 않는 이유는 무엇입니까? :after과 함께 작동하는 이유는 무엇입니까?

누구든지 설명 할 수 있습니까? 감사합니다

예 :

<div style="border:#000 1px solid;padding:10px;"> 
    <div style="width:100px;height:100px;background:blue;float:left;"></div> 
</div> 
<div style="clear:both;"></div>

이 일을 작동하지 않을 것입니다하지만이 clearfix 사실상 무엇을하지?

출처

2011-09-09 Cameron

오, 당신은 ': after' clearfix ... – BoltClock

** 라이브 데모 1 : ** http://jsfiddle.net/Papmy/ ** 라이브 데모 2 : ** http : // jsfiddle.net/Papmy/1/ (보시다시피 차이가 있습니다) –

[가능한 'clearfix'의 가장 좋은 방법은 무엇입니까?] (http://stackoverflow.com/questions/211383/which-method- of-clearfix-is-best) – krtek

CSS :after pseudoelement는 "요소의 내용 다음에 있지만 요소 자체 안에있는 것이 아니라"요소를 의미합니다. 이것이 작동하는 이유입니다.

출처

2011-09-09 12:58:05 duri

알맞다.) 감사합니다. – Cameron

의사 요소입니다. – BoltClock

: after pseudo-element를 사용하는 것보다 clearfix를 수행하는 다른 방법이 있습니다. http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best – krtek

clearfix가 실제로 작동하는 방법에 대한 혼란

답변

관련 문제