Jassif Team Institution

The CSS clear Property

clear பண்பானது மிதக்கும் உறுப்புக்கு அடுத்ததாக இருக்கும் உறுப்புக்கு என்ன நடக்க வேண்டும் என்பதைக் குறிப்பிடுகிறது.

clear பண்பானது உறுப்புகள் மிதக்கும் உள்ளடக்கத்தைச் சுற்றி அல்லது அருகில் இணைவதைத் தடுக்கிறது.

இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

• none - இயல்புநிலை. உறுப்புகள் எந்தப் பக்கத்திலும் மிதக்க அனுமதிக்கிறது
• left - உறுப்பு அதன் இடது பக்கத்தில் மிதக்கும் உறுப்புகளுக்குக் கீழே தள்ளப்படுகிறது
• right - உறுப்பு அதன் வலது பக்கத்தில் மிதக்கும் உறுப்புகளுக்குக் கீழே தள்ளப்படுகிறது
• both - உறுப்பு இடது மற்றும் வலது இரண்டு பக்கங்களிலும் மிதக்கும் உறுப்புகளுக்குக் கீழே தள்ளப்படுகிறது
• inherit - உறுப்பு அதன் பெற்றோரிலிருந்து clear மதிப்பைப் பெறுகிறது

Example

இங்கே, clear: left; div2 ஐ மிதக்கும் div1 க்குக் கீழே, அதன் இடது பக்கத்தில் தள்ளுகிறது:

div1 {
  float: left;
}

div2 {
  clear: left;
}

The CSS clearfix Hack

ஒரு மிதக்கும் உறுப்பு கொள்கலன் உறுப்பை விட உயரமாக இருந்தால், அது அதன் கொள்கலனுக்கு வெளியே "வழிந்தோடும்". இந்தச் சிக்கலைத் தீர்க்க clearfix hack ஐச் சேர்க்கலாம்:

clearfix hack என்பது ::after போலி-உறுப்பை உள்ளடக்கியது, மேலும் பெற்றோர் கொள்கலன் தனது மிதக்கும் குழந்தை உறுப்புகளை சரியாக உள்ளடக்குவதை உறுதிப்படுத்த பயன்படுகிறது:

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

போலி-உறுப்புகள் பற்றி மேலும் அடுத்த பாடத்தில் கற்றுக்கொள்வீர்கள்.

Exercise

clear பண்பு எதைக் குறிப்பிடுகிறது?

CSS Properties

மிதப்பு மற்றும் தெளிவு தொடர்பான CSS பண்புகள்: