सीएसएस लेआउट - स्पष्ट और स्पष्टफिक्स
स्पष्ट संपत्ति
जब हम संपत्ति का उपयोग करते floatहैं, और हम नीचे अगला तत्व चाहते हैं (दाएं या बाएं नहीं), तो हमें clear
संपत्ति का उपयोग करना होगा।
संपत्ति निर्दिष्ट करती है कि उस तत्व के साथ क्या होना चाहिए जो clearफ़्लोटिंग तत्व के बगल में है।
संपत्ति में clearनिम्न में से कोई एक मान हो सकता है:
-
none- तत्व को बाएँ या दाएँ फ़्लोट किए गए तत्वों के नीचे नहीं धकेला जाता है। यह डिफ़ॉल्ट है -
left- तत्व को बाईं ओर तैरने वाले तत्वों के नीचे धकेला जाता है -
right- तत्व दाएँ तैरने वाले तत्वों के नीचे धकेल दिया जाता है -
both- तत्व को बाएँ और दाएँ दोनों फ़्लोट किए गए तत्वों के नीचे धकेला जाता है -
inherit- तत्व अपने माता-पिता से स्पष्ट मूल्य प्राप्त करता है
फ़्लोट्स को साफ़ करते समय, आपको स्पष्ट से फ़्लोट से मेल खाना चाहिए: यदि कोई तत्व बाईं ओर तैरता है, तो आपको बाईं ओर साफ़ करना चाहिए। आपका फ़्लोट किया गया तत्व तैरता रहेगा, लेकिन वेब पेज पर इसके नीचे साफ़ किया गया तत्व दिखाई देगा।
उदाहरण
यह उदाहरण बाईं ओर के फ़्लोट को साफ़ करता है। यहाँ, इसका अर्थ है कि <div2> तत्व को बाईं ओर तैरने वाले <div1> तत्व के नीचे धकेला गया है:
div1 {
float: left;
}
div2 {
clear: left;
}
क्लियरफिक्स हैक
यदि कोई फ़्लोट किया गया तत्व युक्त तत्व से लंबा है, तो वह अपने कंटेनर के बाहर "ओवरफ़्लो" करेगा। फिर हम इस समस्या को हल करने के लिए एक क्लियरफिक्स हैक जोड़ सकते हैं:
क्लियरफिक्स के बिना
क्लियरफिक्स के साथ
उदाहरण
.clearfix {
overflow: auto;
}
The overflow: auto clearfix works well as long as you are able to keep control of your margins and padding (else you
might see scrollbars). The
new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
You will learn more about the ::after pseudo-element in a later chapter.