Clearfix பண்பைப் பயன்படுத்தி, குழந்தை உறுப்புக்கு ஏற்ப பெற்றோர் உறுப்பைத் தானாகவே சரிசெய்து, HTML குறியீட்டில் உள்ள சிக்கல்களை சில பண்புக்கூறுகள் மூலம் சரிசெய்யலாம். நிரம்பி வழிகிறது ” கூடுதல் மார்க்அப்கள் தேவையில்லாமல் பெற்றோர் மற்றும் குழந்தை உறுப்புகளின் பரிமாணங்களைக் கட்டுப்படுத்துகிறது.
Clearfix சொத்தின் பயன்பாடு
ஒரு HTML குறியீடு துணுக்கில் CSS clearfix பண்புகளைச் சேர்ப்பதன் மூலம் வெளியீட்டில் என்ன செய்கிறது என்பதை அறிய, clearfix பண்புகளின் பயன்பாட்டைப் புரிந்துகொள்வோம்:
Clearfix சொத்து இல்லாமல்
கிளியர்ஃபிக்ஸ் எந்த வகையான சிக்கல்களைத் தீர்க்க முடியும் என்பதைப் புரிந்துகொள்ள, கிளியர்ஃபிக்ஸ் சொத்தை இயக்காமல் ஒரு குறியீடு துணுக்கை இயக்குவோம்:
HTML இல் ஒரு வகுப்பை உருவாக்கவும், அது ஒரு div கொள்கலனில் ஒரு படத்தைச் செருகுகிறது:
< div வர்க்கம் = 'தெளிவுபடுத்தல்' >
< br >< img வர்க்கம் = 'img' src = 'image.png' எல்லாம் = 'படம்' அகலம் = '250' உயரம் = '180' >
உரை...
< / div >
மேலே உள்ள HTML க்கான CSS குறியீடு பின்வருமாறு:
<பாணி >
.clearfix {
எல்லை : 3px திடமான #2baa12 ;
திணிப்பு : 5px ;
}
.img {
மிதவை : விட்டு ;
}
>
இது படத்தைக் கொண்டிருக்கும் குழந்தை வர்க்கம் கொள்கலனுக்கு வெளியே நிரம்பி வழியும் வகையில் வெளியீட்டை உருவாக்கும். இது போன்ற சூழ்நிலைகளில், இந்த சிக்கலை எளிதில் அழிக்க அல்லது சரிசெய்ய தெளிவான ஃபிக்ஸ் பண்பைப் பயன்படுத்தலாம்:
Clearfix சொத்துடன்
சிக்கலைச் சரிசெய்ய, நாம் ஒரு சேர்க்கலாம் நிரம்பி வழிகிறது மதிப்புக்கு சமமான பண்பு ஆட்டோ இது குழந்தை உறுப்பு அளவுக்கேற்ப பெற்றோர் கொள்கலனை சரிசெய்யும்:
<பாணி >.clearfix {
எல்லை : 3px திடமான #2baa12 ;
திணிப்பு : 5px ;
}
.clearfix {
நிரம்பி வழிகிறது : ஆட்டோ ;
}
.img {
மிதவை : விட்டு ;
}
>
இங்கே இந்த குறியீடு துணுக்கில், பெற்றோர் வகுப்பு என்பது கொள்கலன் மற்றும் அதன் குழந்தை வகுப்பில் படம் செருகப்பட்டது:
< div வர்க்கம் = 'தெளிவுபடுத்தல்' >< br >< img வர்க்கம் = 'img' src = 'image.png' எல்லாம் = 'படம்' அகலம் = '250' உயரம் = '180' >
உரை...
< / div >
கிளியர்ஃபிக்ஸ் பண்பைச் சேர்ப்பது, செருகப்பட்ட குழந்தையின் உறுப்பின் அளவின்படி தாய் உறுப்பு (கன்டெய்னர்) தானாகவே விரிவடையும்:
HTML இல் உள்ள Clearfix பண்பு இப்படித்தான் செயல்படுகிறது.
முடிவுரை
கூடுதல் மார்க்அப்கள் தேவையில்லாமல் எளிய கிளியர்ஃபிக்ஸ் பண்புடன் பெற்றோர் உறுப்புகளுக்கு ஏற்ப HTML இல் உள்ள குழந்தை உறுப்புகளை சரிசெய்ய ஒரு clearfix பண்பு பயன்படுத்தப்படுகிறது. CSS Clearfix ஐப் பயன்படுத்துவது, குழந்தை உறுப்புகளின் பரிமாணங்களின்படி அவற்றைச் சரிசெய்ய பெற்றோர் உறுப்புகளின் பரிமாணங்களை அதிகரிக்கிறது அல்லது குறைக்கிறது.