Clearfix 속성을 사용하면 자식 요소에 따라 부모 요소를 자동으로 조정하고 ''와 같은 일부 속성을 통해 HTML 코드의 문제를 수정할 수 있습니다. 과다 ” 추가 마크업 없이 부모 및 자식 요소의 크기를 제어합니다.
Clearfix 속성 사용
HTML 코드 스니펫에 CSS clearfix 속성을 추가하여 출력에 무엇을 하는지 알기 위해 clearfix 속성의 사용을 이해해 봅시다.
Clearfix 속성이 없는 경우
clearfix가 해결할 수 있는 문제의 종류를 이해하기 위해 clearfix 속성을 실행하지 않고 코드 스니펫을 실행해 보겠습니다.
div 컨테이너에 이미지를 삽입하는 HTML 클래스를 만듭니다.
< 사업부 수업 = '클리어픽스' >
< br >< 이미지 수업 = 'img' 소스 = '이미지.png' 모든 것 = '영상' 너비 = '250' 키 = '180' >
텍스트...
< / 사업부 >
다음은 위의 HTML에 대한 CSS 코드입니다.
<스타일 >
.clearfix {
국경 : 3px 단단한 #2baa12 ;
심 : 5px ;
}
.img {
뜨다 : 왼쪽 ;
}
>
이렇게 하면 이미지를 포함하는 자식 클래스가 컨테이너 외부에서 오버플로되는 방식으로 출력이 생성됩니다. 이와 같은 상황에서 명확한 수정 속성을 사용하여 이 문제를 쉽게 해결하거나 수정할 수 있습니다.
Clearfix 속성 사용
문제를 해결하기 위해 간단히 추가할 수 있습니다. 과다 값이 다음과 같은 속성 자동 자식 요소의 크기에 따라 부모 컨테이너를 조정합니다.
<스타일 >.clearfix {
국경 : 3px 단단한 #2baa12 ;
심 : 5px ;
}
.clearfix {
과다 : 자동 ;
}
.img {
뜨다 : 왼쪽 ;
}
>
이 코드 스니펫에서 부모 클래스는 컨테이너이고 이미지는 자식 클래스에 삽입됩니다.
< 사업부 수업 = '클리어픽스' >< br >< 이미지 수업 = 'img' 소스 = '이미지.png' 모든 것 = '영상' 너비 = '250' 키 = '180' >
텍스트...
< / 사업부 >
clearfix 속성을 추가하면 삽입된 이미지인 하위 요소의 크기에 따라 상위 요소(컨테이너)가 자동으로 확장됩니다.
이것이 HTML의 Clearfix 속성이 작동하는 방식입니다.
결론
clearfix 속성은 추가 마크업 없이 간단한 clearfix 속성으로 부모 요소에 따라 HTML의 자식 요소를 조정하는 데 사용됩니다. CSS Clearfix를 사용하면 부모 요소의 크기를 늘리거나 줄여 자식 요소의 크기에 따라 조정할 수 있습니다.