CSS Flexbox और CSS ग्रिड की पीढ़ी में कोडर और प्रोग्रामर के रूप में, हम अक्सर CSS Clearfix पर विचार नहीं करते हैं। सीएसएस फ्लेक्सबॉक्स और ग्रिड फ्लोट्स का उपयोग करने से तत्वों की स्थिति को थोड़ा बेहतर (और थोड़ा आसान!)
फिर भी, हम सभी को अभी भी उन कुछ उदाहरणों के बारे में पता होना चाहिए जहां हम विरासत कोड के साथ काम कर रहे हैं जो फ्लोट्स का उपयोग करता है और कोडबेस के अधिक आधुनिक हैंडलिंग पर स्विच करने के लिए समय या पैसा नहीं है।
इस लेख में, हम क्लियरफिक्स हैक का पता लगाएंगे और डिस्प्ले पर चर्चा करेंगे:क्लियरफिक्स समाधान के नए प्रतिस्थापन के रूप में फ्लो-रूट।
फ्लोट क्या है?
एक अनुस्मारक के रूप में, फ्लोट संपत्ति मूल रूप से उस तत्व को लेती है जिसे आप फ़्लोट करना चाहते हैं और इसे अपने कंटेनर के बाईं या दाईं ओर रखता है:
<!DOCTYPE html>
<html lang="en>
<head>
<title>CSS Clearfix</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: grey;
}
ul {
max-width: 800px;
width: 100%;
background: lightblue;
border: 5px double black;
padding: 20px;
}
img {
width: 300px;
margin: 20px;
}
li {
list-style: none;
float: left;
}
</style>
</head>
<body>
<!-- https://unsplash.com/photos/2PPjq7I3bs4 -->
<ul>
<li>
<img src="https://images.unsplash.com/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" /> </li>
<!-- https://unsplash.com/photos/vYhBeZ_G_xE -->
<li>
<img src="https://images.unsplash.com/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" /> </li>
<!-- https://unsplash.com/photos/7UduWMpT618 -->
<li>
<img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" /> </li>
<!-- https://unsplash.com/photos/Ah_QC2v2alE -->
<li>
<img src="https://images.unsplash.com/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" />
</li>
<!-- https://unsplash.com/photos/T-0EW-SEbsE -->
<li>
<img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> </li>
</ul>
<p>Here is a sample paragraph element. Something is wrong about where I am in the layout. What else is wrong with the layout?</p>
</body>
</html>
इस समय, कुछ इमेज ऐसी हैं जो <ul> . में होनी चाहिए , कंटेनर जिसमें हल्के नीले रंग की पृष्ठभूमि होती है, लेकिन वे चित्र <ul> के अन्य तत्वों की तुलना में लम्बे होते हैं . इसके परिणामस्वरूप एक अतिप्रवाह होता है जो फ्लोट को साफ़ नहीं करता है और क्षैतिज मार्जिन को ध्वस्त कर देता है।
यही कारण है कि हल्का नीला कंटेनर इतना छोटा है, क्यों फ़्लोट्स को रखा जाता है जहाँ वे हैं और क्यों हमारे पास फ्लोट तत्वों के साथ-साथ एक पैराग्राफ तत्व है। पैरेंट कंटेनर से लम्बे बाल तत्वों के साथ फ्लोट का उपयोग करते समय यह डिफ़ॉल्ट मान होता है।
ठीक करें
पहला संभावित समाधान वह है जिसे क्लियरफिक्स हैक . कहा जाता है . यह हैक पैरेंट कंटेनर के बाद कुछ खाली सामग्री सम्मिलित करता है ताकि यह फ़्लोट किए गए तत्वों को शामिल करने के लिए विस्तारित हो। हम इसे प्राप्त करने के लिए छद्म तत्व ::के बाद का उपयोग करेंगे:
<!DOCTYPE html>
<html lang="en>
<head>
<title>CSS Clearfix</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: grey;
}
ul {
max-width: 800px;
width: 100%;
background: lightblue;
border: 5px double black;
padding: 20px;
}
img {
width: 300px;
}
li {
list-style: none;
float: left;
margin: 20px;
}
.clearfix-hack::after {
content: " ";
clear: both;
display: table;
}
</style>
</head>
<body>
<!-- https://unsplash.com/photos/2PPjq7I3bs4 -->
<ul>
<li>
<img src="https://images.unsplash.com/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" /> </li>
<!-- https://unsplash.com/photos/vYhBeZ_G_xE -->
<li>
<img src="https://images.unsplash.com/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" /> </li>
<!-- https://unsplash.com/photos/7UduWMpT618 -->
<li>
<img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" /> </li>
<!-- https://unsplash.com/photos/Ah_QC2v2alE -->
<li>
<img src="https://images.unsplash.com/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" />
</li>
<!-- https://unsplash.com/photos/T-0EW-SEbsE -->
<li>
<img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> </li>
</ul>
<p>Here is a sample paragraph element. Something is wrong about where I am in the layout. What else is wrong with the layout?</p>
</body>
</html>
थोड़े से मार्जिन के अलावा मैंने <li> . में जोड़ा रिक्ति को बेहतर बनाने के लिए, जो कुछ भी जोड़ा गया वह था .clearfix-hack::after चयनकर्ता। इसमें तीन गुण होते हैं:सामग्री, प्रदर्शन और स्पष्ट।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
एक खाली स्ट्रिंग सामग्री संपत्ति के मूल्य पर कब्जा कर लेती है, हम तत्व की सीमा को दोनों के अंत से नीचे ले जा रहे हैं क्लियर प्रॉपर्टी में फ्लोट्स के प्रकार और हम अपने डिस्प्ले को block . पर सेट कर रहे हैं या table पृष्ठ पर डेटा/छवियों को प्रस्तुत करने के लिए।
इसके परिणामस्वरूप कंटेनर के अंदर छवियों का एक स्वीकार्य प्रदर्शन और उसके नीचे
टैग होता है।
क्या यह Clearfix का अंत है?
फ्लेक्सबॉक्स और ग्रिड के आगमन के साथ, क्लियरफिक्स की आवश्यकता गायब हो रही है। CSS में clearfix को संभालने के एक नए तरीके के साथ और भी बहुत कुछ:
.clearfix-hack {
display: flow-root
}
.clearfix-hack::after को बदलें उपरोक्त कोड के साथ चयनकर्ता। क्या कुछ बदलता है?
display: flow-root
निष्कर्ष
हमने उस बग को ठीक करने के दो अलग-अलग तरीकों पर चर्चा की, जो तब बनता है जब हम फ्लोट प्रॉपर्टी को चाइल्ड एलिमेंट में जोड़ते हैं:क्लियरफिक्स हैक और display: flow-root का उपयोग करना। . सबसे अधिक संभावना है, आप इन हैक्स का उपयोग केवल लीगेसी कोड पर करेंगे, न कि किसी भी कोड पर जिसे आप वास्तव में फ्लेक्सबॉक्स और ग्रिड के निर्माण के कारण स्क्रैच से बनाते हैं।