सीएसएस लेआउट - फ्लॉटिंग और क्लीअर

सीएसएस लेआउट - फ्लॉटिंग और क्लीअर

CSS float यह गुण एलीमेंट को कैसे फ्लोट करने का निर्धारित करता है。

CSS clear यह गुण जो एलीमेंट को छुट्टी के एलीमेंट के पास और किस ओर फ्लोटिंग कर सकता है, इसे निर्धारित करता है。

float गुण

float यह गुण सामग्री को स्थानित करने और फॉर्मैट करने के लिए इस्तेमाल किया जाता है, उदाहरण के लिए चित्र को कंटेनर के टेक्स्ट में बाईं ओर फ्लोटिंग करना。

float इस गुण को निम्नलिखित मानों में से एक निर्धारित किया जा सकता है:

  • left - एलीमेंट अपने कंटेनर के बाईं ओर फ्लोटिंग करेगा
  • right - एलीमेंट अपने कंटेनर के दाईं ओर फ्लोटिंग करेगा
  • none - एलीमेंट फ्लोटिंग नहीं करेगा (यह टेक्स्ट में उस स्थान पर दिखाया जाएगा जहां यह नया है). डिफ़ॉल्ट मान。
  • inherit - एलीमेंट अपने माता एलीमेंट के float मान को आगे ले लेता है

सबसे सरलता से इसका इस्तेमाल है:float इस गुण के द्वारा (समाचार पत्रों में) टेक्स्ट के चारों ओर चित्र को घेरने का प्रभाव प्रदान किया जा सकता है。

उदाहरण - float: right;

इस उदाहरण में चित्र टेक्स्ट में दाईं ओर फ्लोटिंग करने के लिए निर्दिष्ट किया गया है:

पाइनेप्पल

प्रमुख वेब तकनीक ट्यूटोरियल - सभी मुफ्त।CodeW3C.com पर, आप आपकी जरूरत होने वाले सभी वेबसाइट निर्माण ट्यूटोरियल को ढूंढ सकते हैं।आधार से HTML तक CSS, और आगे की XML, SQL, JS, PHP तक।

हमारा रेफरेंस मैनुअल वेब प्रौद्योगिकी के हर विषय को कवर करता है।इसमें W3C मानक प्रौद्योगिकी जैसे HTML, CSS, XML शामिल हैं।इसके अलावा, JavaScript, PHP, SQL जैसी अन्य प्रौद्योगिकियां भी हैं।

CodeW3C.com में हम हजारों इंस्टेंस प्रदान करते हैं।हमारे ऑनलाइन एडिटर का उपयोग करके, आप इन उदाहरणों को संपादित कर सकते हैं और कोड के परीक्षण कर सकते हैं।

इंस्टेंस

img {
  float: right;
}

स्वयं प्रयोग करें

उदाहरण - float: left;

इस उदाहरण में चित्र टेक्स्ट में उस स्थान पर दिखाया जाएगा:बाईं ओरफ्लोटिंग:

पाइनेप्पल

प्रमुख वेब तकनीक ट्यूटोरियल - सभी मुफ्त।CodeW3C.com पर, आप आपकी जरूरत होने वाले सभी वेबसाइट निर्माण ट्यूटोरियल को ढूंढ सकते हैं।आधार से HTML तक CSS, और आगे की XML, SQL, JS, PHP तक।

हमारा रेफरेंस मैनुअल वेब प्रौद्योगिकी के हर विषय को कवर करता है।इसमें W3C मानक प्रौद्योगिकी जैसे HTML, CSS, XML शामिल हैं।इसके अलावा, JavaScript, PHP, SQL जैसी अन्य प्रौद्योगिकियां भी हैं।

CodeW3C.com में हम हजारों इंस्टेंस प्रदान करते हैं।हमारे ऑनलाइन एडिटर का उपयोग करके, आप इन उदाहरणों को संपादित कर सकते हैं और कोड के परीक्षण कर सकते हैं।

इंस्टेंस

img {
  float: left;
}

स्वयं प्रयोग करें

उदाहरण - No float

इस उदाहरण में, चित्र टेक्स्ट में उस स्थान पर दिखाया जाएगा जहां यह नया है (float: none;):

पाइनेप्पल प्रमुख वेब तकनीक ट्यूटोरियल - सभी मुफ्त।CodeW3C.com पर, आप आपकी जरूरत होने वाले सभी वेबसाइट निर्माण ट्यूटोरियल को ढूंढ सकते हैं।आधार से HTML तक CSS, और आगे की XML, SQL, JS, PHP तक। हमारा रेफरेंस मैनुअल वेब प्रौद्योगिकी के हर विषय को कवर करता है।इसमें W3C मानक प्रौद्योगिकी जैसे HTML, CSS, XML शामिल हैं।इसके अलावा, JavaScript, PHP, SQL जैसी अन्य प्रौद्योगिकियां भी हैं। CodeW3C.com में हम हजारों इंस्टेंस प्रदान करते हैं।हमारे ऑनलाइन एडिटर का उपयोग करके, आप इन उदाहरणों को संपादित कर सकते हैं और कोड के परीक्षण कर सकते हैं।

इंस्टेंस

img {
  float: none;
}

स्वयं प्रयोग करें

अधिक वाचन

अध्ययन ग्रंथ:CSS फ्लॉटिंग