클리어 플로팅을 달성하기 위해 CSS에서 Clearfix를 사용하는 방법

클리어 플로팅을 달성하는 Css 클리어픽스 방법: 먼저 플로팅을 클리어해야 할 경우 [.clearfix]를 작성한 다음 클리어해야 하는 요소에 클리어픽스 클래스 이름을 추가하기만 하면 됩니다.

이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.

클리어 플로팅을 달성하기 위한 Css 클리어픽스 방법:

클리어픽스 정의:

.clearfix:after {}{
content: "."; /**//*内容为“.”就是一个英文的句号而已。也可以不写。*/
display: block; /**//*加入的这个元素转换为块级元素。*/
clear: both; /**//*清除左右两边浮动。*/
visibility: hidden; /**//*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/
line-height: 0; /**//*行高为0；*/
height: 0; /**//*高度为0；*/
font-size:0; /**//*字体大小为0；*/
}
.clearfix {}{ *zoom:1;} /**//*这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/

클리어픽스 원리:

1 IE6에서 7 줌: 1은 hasLayout을 트리거하여 내부 플로트 요소를 닫습니다. .

2. 표준 브라우저에서 .clearfix:after 가상 클래스는 .clearfix에 적용된 요소 뒤에 클리어: 두 블록 수준 요소를 삽입하여 부동 소수점을 지웁니다.

3. 부동소수점을 삭제해야 하는 경우 .clearfix를 작성한 다음 삭제해야 하는 요소에 Clearfix 클래스 이름을 추가하면 됩니다.

관련 튜토리얼 권장 사항: CSS 비디오 튜토리얼

위 내용은 클리어 플로팅을 달성하기 위해 CSS에서 Clearfix를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!