CSS लेआउट - फ्लोट और क्लियर
CSS floatगुण निर्दिष्ट करता है कि किसी तत्व को कैसे तैरना चाहिए।
CSS clearगुण निर्दिष्ट करता है कि कौन से तत्व साफ़ किए गए तत्व के बगल में और किस तरफ तैर सकते हैं।
फ्लोट संपत्ति
संपत्ति का floatउपयोग सामग्री की स्थिति और स्वरूपण के लिए किया जाता है जैसे कि एक छवि को एक कंटेनर में पाठ पर बाईं ओर तैरने दें।
संपत्ति में floatनिम्न में से कोई एक मान हो सकता है:
-
left- तत्व अपने कंटेनर के बाईं ओर तैरता है -
right- तत्व अपने कंटेनर के दाईं ओर तैरता है -
none- तत्व तैरता नहीं है (पाठ में वहीं प्रदर्शित होगा जहां यह होता है)। यह डिफ़ॉल्ट है -
inherit- तत्व को उसके माता-पिता का फ्लोट मान विरासत में मिलता है
अपने सरलतम उपयोग में, floatसंपत्ति का उपयोग छवियों के चारों ओर पाठ लपेटने के लिए किया जा सकता है।
उदाहरण - फ्लोट: दाएं;
निम्न उदाहरण निर्दिष्ट करता है कि एक छवि को टेक्स्ट में दाईं ओर तैरना चाहिए:
दर्द ही प्रेम है, मुख्य भंडारण प्रणाली। फेसेलस इम्परडाइट, नहीं और कभी-कभी कहा जाता था, लेकिन नफरत की चाहत Maecenas प्रशंसक, तामसिक और खाना पकाने नहीं, सामूहिक जीवन के लेखक हैं।
उदाहरण
img {
float: right;
}
उदाहरण - फ्लोट: बाएं;
निम्न उदाहरण निर्दिष्ट करता है कि एक छवि को पाठ में बाईं ओर तैरना चाहिए:
दर्द ही प्रेम है, मुख्य भंडारण प्रणाली। फेसेलस इम्परडाइट, नहीं और कभी-कभी कहा जाता था, लेकिन नफरत की चाहत Maecenas प्रशंसक, तामसिक और खाना पकाने नहीं, सामूहिक जीवन के लेखक हैं।
उदाहरण
img {
float: left;
}
उदाहरण - कोई फ्लोट नहीं
निम्नलिखित उदाहरण में छवि को ठीक वहीं प्रदर्शित किया जाएगा जहां यह पाठ में होता है (फ्लोट: कोई नहीं;):
दर्द ही प्रेम है, मुख्य भंडारण प्रणाली। फेसेलस इम्परडाइट, नहीं और कभी-कभी कहा जाता था, लेकिन नफरत की चाहत Maecenas प्रशंसक, तामसिक और खाना पकाने नहीं, सामूहिक जीवन के लेखक हैं।
उदाहरण
img {
float: none;
}
उदाहरण - एक दूसरे के बगल में फ़्लोट करें
आम तौर पर div तत्वों को एक दूसरे के ऊपर प्रदर्शित किया जाएगा। हालाँकि, यदि हम उपयोग करते हैं तो float: leftहम तत्वों को एक दूसरे के बगल में तैरने दे सकते हैं:
उदाहरण
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}