सीएसएस 1 के बाद स्पष्ट सीएसएस संपत्ति सीएसएस का हिस्सा रही है। यह आपको यह निर्दिष्ट करने देता है कि कौन से तत्व साफ़ तत्व के बगल में तैर सकते हैं और किन किनारे पर। स्पष्ट संपत्ति में पांच संभावित मूल्य हैं:
- कोई नहीं
- बाएं
- सही
- दोनों
- वारिस
सीएसएस स्पष्ट संपत्ति का उपयोग कैसे करें
स्पष्ट संपत्ति का उपयोग करने का सबसे आम तरीका यह है कि आपने तत्व पर फ़्लोट प्रॉपर्टी का उपयोग किया है। उदाहरण के लिए:
मेरी छवि के बगल में पाठ।
पाठ जो मेरी छवि से नीचे है।
सभी तत्वों को साफ़ करने के लिए डिफ़ॉल्ट: कोई नहीं; , इसलिए यदि आप अन्य तत्वों को किसी चीज़ के बगल में तैरना नहीं चाहते हैं, तो आपको स्पष्ट शैली बदलनी होगी।
जब आप फ्लोट को साफ़ कर रहे हों, तो आप अपनी तरफ से अपने स्पष्ट से मेल खाते हैं। तो यदि आपने बाईं ओर तत्व को फ़्लोट किया है, तो आपको बाईं ओर साफ़ करना चाहिए। आपका फ़्लोटेड तत्व फ़्लोट करना जारी रखेगा, लेकिन साफ़ किए गए तत्व और उसके बाद सबकुछ इसके नीचे वेब पेज पर दिखाई देगा।
यदि आपके पास तत्व हैं जो दाएं और बाएं दोनों में तैरते हैं, तो आप केवल एक तरफ साफ़ कर सकते हैं या आप दोनों को साफ़ कर सकते हैं।
लेआउट में स्पष्ट का उपयोग करना
अधिकांश डिज़ाइनर स्पष्ट संपत्ति का उपयोग करने वाले सबसे आम तरीके पृष्ठ तत्वों के लेआउट में हैं । आपके पास टेक्स्ट के ब्लॉक के अंदर एक छवि हो सकती है और अगले अनुच्छेद को छवि के नीचे शुरू करना चाहते हैं, या आपके पास पाठ का एक संपूर्ण स्तंभ हो सकता है जिसे आप पाठ के दूसरे समूह के बगल में तैरना चाहते हैं, नीचे दिए गए कुछ पाठ के साथ।
इस फ़ॉर्म में एक लेआउट के लिए एचटीएमएल यहाँ है।
इसमें एक डिवी कंटेनर है जो बाईं ओर तैरता है।
एक छोटा फ्लोटेड div
कंटेनर div के अंदर सामग्री जो फ़्लोटेड div के दाईं ओर जा रहे हैं।
यह मुख्य div की शेष सामग्री के बाईं ओर तैरने वाले छोटे div के साथ ठीक काम करेगा।
आप फ़्लोट किए गए बॉक्स के बगल में दिए गए पाठ को बस एक टैग जोड़कर साफ़ कर सकते हैं जहां आप इसे फ़्लोट किए गए बॉक्स के नीचे लिखना शुरू करना चाहते हैं।
लेकिन समस्या तब आती है जब फ्लोट बॉक्स इसके आगे की सामग्री से अधिक लंबा होता है। फिर, जैसा कि आप देख सकते हैं, मुख्य बॉक्स का पृष्ठभूमि रंग फ़्लोट किए गए बॉक्स के नीचे नहीं ले जाया जाता है।
सौभाग्य से, इसे ठीक करने का एक आसान तरीका है: संपत्ति। मुख्य बॉक्स को अतिप्रवाह पर सेट करके: ऑटो; जैसा कि इस उदाहरण में दिखाया गया है, पृष्ठभूमि रंग लंबे समय तक चलने वाले बॉक्स के बगल में रहेगा।