디스플레이:테이블과 디스플레이:블록 사용법의 차이점

clearfix가 일반적으로 다음과 같이 작성된다는 것을 우리 모두 알고 있습니다:

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

그런데 왜 display: table을 사용할까요? display:block을 사용하면 디스플레이가 정상적인 것처럼 보이고 부동 항목을 지울 수 있습니다.

이런 질문은 예전에 찾아봤는데 설명이 헷갈리거나 제 수준이 너무 낮은 것 같아요.. 아무튼 무슨 표현을 하고 싶은지 이해도 안되고 예도 안들어주네요. ado, 결과를 살펴보세요:

CodePen에서 wenjie(@wenjie)의 Pen Clearfix를 확인하세요.

상위 컨테이너를 BFC로 만드는 방법과 여백을 방지하는 방법에 대해 인터넷에서 많은 논의가 있습니다. 무너지다. 하지만 예시를 안 주면 저는 뭘 해도 무너지지 않아요. 원래 파란색 부분에 테스트했는데 보셨나요? 블록을 사용했습니다. 여백이 정상이고 무너지지 않았나요? 나중에 나는 여백이 접히기 위해서는 실제로 여백이 아닌 부동 레이블에 있어야 한다는 것을 발견했습니다. 따라서 display:table은 이 문제를 해결하는 것입니다.

둘 다 떠 있으면 붕괴가 발생하지 않습니다. 어떻게 측정해도 감지할 수 없습니다. 테이블 대신 블록을 사용하면 무엇이 문제인가요?

그리고 왜 : before를 써야 할까요? 떼어내면 플로트도 정상적으로 클리어가 되어 마진톱이 무너지는 것을 방지해줍니다. 플로팅 라벨이 없을 때도 측정할 수 있습니다.

사실 붕괴라는 단어에 의구심이 듭니다. 접히지 않았고 여백이 여전히 존재하며 외부 컨테이너의 여백일 뿐입니다. 무너진다는 것은 존재하지 않거나 작아진다는 뜻이 아닌가?

최신 브라우저(테스트에는 FF54를 사용했습니다)에서는 display:flow-root;를 직접 사용하여 부동소수점을 지울 수 있습니다. 효과는 우리가 사용하는 display:table과 동일합니다.

위 내용은 디스플레이:테이블과 디스플레이:블록 사용법의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!