फ्लोट-संबंधित CSS प्रॉपर्टीज़
यह आलेख फ्लोट-संबंधित CSS प्रॉपर्टीज़ को समझाता है।
आप float और clear प्रॉपर्टीज़ के उपयोग और सिंटैक्स के बारे में जान सकते हैं।
YouTube Video
प्रीव्यू के लिए HTML
css-float.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-float.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>float</h3>
23 <section style="height: auto; color: black;">
24 <header><h4>float: left</h4></header>
25 <section class="sample-view">
26 <div class="float-left">float left</div>
27 <div class="content">
28 <p>
29 paragraph 1-1
30 paragraph 1-2
31 </p>
32 <p>paragraph 2</p>
33 </div>
34 <div class="clearfix"></div>
35 </section>
36 </section>
37 </article>
38 </main>
39</body>
40</html>फ्लोट-संबंधित CSS प्रॉपर्टीज़
float और clear प्रॉपर्टीज़
1.float-left {
2 float: left;
3 width: 150px;
4 margin-right: 20px;
5 background-color: lightblue;
6}
7
8.content {
9 width: 300px;
10 height: 100px;
11}
12
13.content p {
14 background-color: lightblue;
15 margin: 10px;
16}
17
18.clearfix {
19 clear: both;
20 display: none;
21}float उन CSS प्रॉपर्टीज़ में से एक है, जो किसी एलिमेंट को उसके पैरेंट एलिमेंट के भीतर बाएँ या दाएँ फ्लोट करने में उपयोग की जाती है, जिससे अन्य एलिमेंट उसके चारों ओर रैप हो सकें। float प्रॉपर्टी का अक्सर टेक्स्ट के चारों ओर इमेज या बॉक्स एलिमेंट्स प्लेस करने के लिए उपयोग होता है, लेकिन इसके उपयोग में कमी आई है क्योंकि flex और grid जैसे नए लेआउट मेथड आदर्श बन गए हैं।
float-leftक्लास में,floatप्रॉपर्टी कोleftपर सेट किया गया है। लागू किया गया एलिमेंट पैरेंट एलिमेंट के बाएँ ओर फ्लोट होता है, और अगला एलिमेंट दाएँ ओर रैप होता है।clearfixक्लास में,clearप्रॉपर्टी कोbothपर सेट किया गया है। इस क्लास का उपयोग अगला एलिमेंट को फ्लोट किए गए एलिमेंट के चारों ओर रैप होने से रोकता है। यहां, हम अगला एलिमेंट को इमेज के बाद फ्लोट होने से रोकते हैं ताकि लेआउट बना रहे।
float का उपयोग कैसे करें
मान (Values)
left: एलिमेंट को बाईं ओर फ्लोट करता है, जिससे अन्य एलिमेंट दाईं ओर रैप कर सकें।right: एलिमेंट को दाईं ओर फ्लोट करता है, जिससे अन्य एलिमेंट बाईं ओर रैप कर सकें।none: यह डिफ़ॉल्ट मान है और एलिमेंट को फ्लोट नहीं करता है।inherit: पैरेंट एलिमेंट सेfloatप्रॉपर्टी का मान प्राप्त करता है।
clear प्रॉपर्टी
floatका उपयोग करते समय, अगला एलिमेंट फ्लोट किए गए एलिमेंट के चारों ओर रैप हो सकता है। इसे रोकने के लिए,clearप्रॉपर्टी का उपयोग किया जाता है।clearके मान इस प्रकार हैं:।left: बाईं ओर फ्लोट किए गए एलिमेंट्स से बचता है।right: दाईं ओर फ़्लोट किए गए तत्वों से बचाता है।both: बाईं और दाईं दोनों ओर फ़्लोट किए गए तत्वों से बचाता है।none: तत्वों को आसपास तैरने की अनुमति देता है। यह डिफ़ॉल्ट मान है।
नोट्स
floatका उपयोग करते समय, एक समस्या हो सकती है जहां पैरेंट तत्व की ऊंचाई फ़्लोट किए गए तत्व की ऊंचाई को नज़रअंदाज कर देती है। इससे बचने के लिए, पैरेंट तत्व परclearfixतकनीक याoverflow: hidden;का उपयोग करें।- रेस्पॉन्सिव डिज़ाइन या जटिल लेआउट में,
floatको संभालनाflexयाgridकी तुलना में अधिक कठिन हो सकता है, इसलिएflexयाgridका उपयोग करने की सिफारिश की जाती है।
सारांश
float एक पुरानी तकनीक है जो तत्वों को बाएं या दाएं फ़्लोट करने के लिए उपयोग की जाती है, जिससे टेक्स्ट या अन्य तत्व चारों ओर रैप हो जाते हैं, और यह अभी भी कभी-कभी सरल लेआउट या इमेज रैपिंग के लिए उपयोग की जाती है। हालांकि, अधिक लचीले और आसान लेआउट बनाने के लिए flexbox या grid की सिफारिश की जाती है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।