हेल्लो दोस्तों ! आज हम इस आर्टिकल में CSS float Property के बारें में पढेंगे. इसे बहुत ही आसान भाषा में लिखा गया है. इसे आप पूरा पढ़िए, यह आपको आसानी से समझ में आ जायेगा. तो चलिए शुरू करते हैं:-
CSS float Property का परिचय –
जब हम MS Word या किसी अन्य Text Editor में कोई Document बनाते हैं तो उसमे Picture के चारों तरफ Content आ जाता हैं. या Picture एक तरफ जैसे Left/Right Side होती हैं और Content एक तरफ होता है.
लेकिन, Webpages में इस कार्य को करन के लिए एक CSS Property का इस्तेमाल किया जाता हैं. जिसका नाम हैं – CSS float Property.
CSS float Property द्वारा Image को Right या Left Side Float कर सकते हैं. और Content को उसके चारों तरफ Show करा सकते हैं. Image के अलावा HTML के Block Level Elements को भी float किया जा सकता हैं.
float Property द्वारा सिर्फ दांए एवं बांए तरफ ही Elements को float करा सकते हैं. इससे ऊपर-नीचे float नही कर सकते हैं. जब किसी Element को float किया जाता हैं तो वह Container की Full Width तक float होता हैं. या अगले Floated Element तक float होता हैं.
Different Type of Float Values –
Elements की Floating को नियंत्रित करने के लिए float Property के द्वारा कई Values उपलब्ध करवाई जाती हैं. ताकि floating को नियंत्रित किया जा सके. नीचे float Property की Values के बारे में बताया जा रहा हैं.
- left – इस Value से Element Left Side में float होता हैं. और बाकि Inline Elements एवं Content इसके चारों तरफ Show होगा.
- right – इस Value से Element Right Side में float होगा. आपकी स्क्रीन में दांए तरफ.
- none – इस Value से Element अपने Normal Flow में Show होता हैं.
- initial – इस Value से Default Value Show होती हैं.
- inherit – इस Value से Element Parent Element की Value से Show होता हैं.
float Property Example
इसे Try कीजिए –
<!DOCTYPE html>
<html>
<head>
<title>CSS float Property Example</title>
<style type=”text/css”>
div {
border: 1px solid red;
}
#div2 {
float: left;
}
#div3 {
float: right;
}
</style>
</head>
<body>
<p>नीचे हम 3 Div Define कर रहे हैं. जिसमे से हम Div2 को Left float कर रहे हैं और Div3 को
Right float कर रहे हैं.</p>
<div id=”div1″>This is Div1</div>
<div id=”div2″>Div2 floating left.</div>
<div id=”div3″>Div3 floating right.</div>
</body>
</html>ऊपर दिया कोड इस प्रकार का परिणाम देगा.
