Up next in 10
CSS Float & Clear _ Sigma Web Development Course - Tutorial #34
128 views
Mar 11, 2024
In Tutorial #34 of the Sigma Web Development Course, we delve into the fundamental concepts of CSS Float and Clear. This session explores how these properties are used to control the placement and behavior of floated elements within a webpage layout. Viewers will gain practical insights into creating multi-column designs, positioning elements within a layout, and handling potential challenges with clear. Whether you're a beginner seeking to enhance your understanding of layout techniques or an experienced developer looking to optimize your styling workflow, this tutorial provides valuable knowledge on leveraging CSS Float and Clear. Join us as we navigate through the intricacies of web layout, unlocking new possibilities for creating dynamic and visually appealing designs.
View Video Transcript
0:00
आज के इस वीडियो में float and clear के बारे में हम लोग समझेंग��
0:02
जब से flexbox आया है तब से इन properties का इस्तेमाल बहुत कम हो गया ह��
0:07
लेकिन अगर आप लोगों को कोई client एक ऐसी website दिखाता है जिसमे float and clear लगा हुआ ह��
0:12
तो आपकी understanding इतनी होनी चाहिए कि आप समझ पाए कि float and clear क्या होत��
0:16
इस वीडियो में हम लोग यही देखने वाले हैं हाइ नर्जी के साथ लाइक करके नीचे कॉमेंट सेक्शन मे��
0:20
sigma batch op ज़रूर लिख देना चलते हैं computer screen में लेट्स रोल दे इंट्रूव��
0:24
लेकिन इस वीडियो में एक ऐसी बात बोलूंगा कि आप भी कहोगी कि यह क्या बोल दिया आपने लेकिन उससे पहल��
0:40
मैं आप लोगों समझाना चाहता हूं कि फ्लोट एंड क्लियर किस तरह से काम करते हैं तो यहां पर आप लोग देख��
0:44
वीडियो नंबर थर्टी फॉर के नाम से एक बनाने जा रहा हूं फोल्डर तो मैंने वीडियो थर्टी फॉर नाम से एक फोल्ड��
0:50
बना लिया और इसको मैंने खोल लिया विश्व कोड में और यहां पर मैं क्या करने जा रहा हूं कि मैं यहां पर आ��
0:57
आपको दिखाऊंगा अभी कि एक्साक्टली किस टीमल पर हम लोग फ्लोट एंड क्लियर का कंसेप्ट समझेंगे और सीएस फ्लो��
1:03
एंड लियर के बारे में जो बात मैं अभी आप लोगों को बताने वाला हूं वह आप लोग को यार यह क्या कह दिया तो ए��
1:08
करते हैं, dot cards के नाम से एक div बनाएंगे, और इसके अंदर मैं dot card multiply by 3 करूँगा
1:16
तो एक card है, इसके अंदर तीन और cards है, ठीक है, और मैं यहाँ पर card 1, card 2, card 3 इस तरह से बनाऊंगा
1:23
यहाँ पर card 2 कर दूँगा, फिर card 3 कर दूँगा, एक बड़ी simple सी हमारी यहाँ प��
1:28
जो HTML है वो मैंने लिखी है open in browser करूँगा यह कुछ इस तरह से दिख रहा ह��
1:33
ठीक है बढ़िया बहुती बढ़िया अती सुन्दर अब float and clear क्या होता ह��
1:36
यह बता दो तो चलो बताता हूँ तो क्या होगा कि let us say मैंने यहाँ पर एक यह आगे यह जाएगा ठीक है हमें इसमें एक विड्ड दूंगा मैं विड्ड इस इकॉल टू दूंगा इसमें तो मैं आपको उन्हां विड्ड इ��
2:04
इक्वल टू वाइट री पिक्सिल्स एंड लेट्स सी यह छोटी सी हमारी इमेज यह पर आ गई इन फाक्ट 230 कर लेने और दिखे��
2:10
तो सही में तो यह हमारी एक एमेज आ गए और नीचे कार्ड वन है कार्ड टू एक आदमी है पता है आपने कह दिया क��
2:15
बहुत बढ़िया लग रहा है आगे बताओ तो आगे सीन यह है लेटर से कि मैं यहां पर इसके नीचे एक पैराग्राफ्ट डालत��
2:21
हूं कार्ड वन में तो कार्ड वन के वाला जो डिवेस के अंदर में एक पैराग्राफ्ट डालता हूं इसमें मैं लिखता हूं लॉरे��
2:26
3434 लिखों तो यह नीचे आ जाएगा यहां पर लेकिन क्या होगा अगर मैं यह वाला जो इमेज है तो मैं यह कह दूं कि भा��
2:34
allow image float left float left left float allow right side content
2:47
इससे पहले ये allow नहीं कर रहा था लेकिन अब ये allow करेगा अपने right side पर content क��
2:52
तो ये होता है हमारा float अब मैं आपको कुछ चीज़े यहाँ पर करके दिखाना चाहता हू��
2:56
सबसे पहले तो मैं यहाँ पर dot cards में एक style लगाऊँगा जो की होगा border 2 pixels solid black
3:03
और उसी के साथ साथ मैंने यह लगा दिया तो यह देखो यह black color से आ गय��
3:07
और ये borders मैंने क्यों लगाया आपको अभी पता茶लेगा और dot card में मैं लगाने वाला हूँ border
3:13
2 pixels solid red ठीक है ये भी क्यों लगाया आपको पता चलेग��
3:18
तो ये मैंने लगा दिया यहाँ पर cards में तो हर card में एक red color का border है और container में black color का border ह��
3:24
अब आपने एक चीज़ देखी जब भी हम float property का इस्तेमाल करते हैं तो image अगर overflow हो रहा है container में स��
3:29
तो वो overflow हो जाता है वो अपने container में accommodate नहीं करता ह��
3:34
तो इसको हम लोग use कर सकते हैं एक property का जो हमारा parent container ह��
3:39
उसके अंदर हम लोग लगा सकते हैं display और display में हम लोग लगा सकते है��
3:45
flow root और जैसे हम display flow root लिखेंगे यहाँ पर आप लोग देखो कि यह issue यहाँ पर solve हो जाएग��
3:50
अब यह overflow नहीं होगा तो यह एक तरीका होता है display flow root लगा कर ह��
3:54
जो container है उसके within जो elements उनको fit कर सकते है��
3:59
अगर मैं इसको float right करता तो क्या होता? कुछ नहीं, यह right की तरफ को float होता है, और left side पर content आ जाता है
4:04
तो आप यहाँ पर देख सकते हो, और यह right पर आ गया, और यहाँ पर content float कर रहा है
4:09
अगर मैं इसमें lorem, यह ना लिखकर कुछ बड़ा लिख देता है, लॉरेम तीन सो तैसे लिख देता लॉरेम तीन सो तैसे और लॉरेम तीन सो तैसे गुड अमाउंट टेक्स तब यह आप लोग देख��
4:19
टेक्स्ट कटेगा नहीं यहां पर प्लोड करेगा इमेज और इस तरह से यह आ जाएगा तो यह ना पहले यूज किये जाते थ��
4:25
जब हम लोग newspaper type का content बनाते थे, ज़्यादातर blocks में चीज की जरूरत पड़ती थी कि यार एक side को image रहेगा, एक side को content रहेगा, और image कभी left में float कर रहा है, कभी right में float कर रहा है, और जो article है वो लिखा जा रहा है, लेकिन जो modern layouts है, वो ऐसे बिल्कुल भी design नहीं होते है, अब आ��
4:55
specific div text allow right side element float repeat allow right side element float right
5:29
और एंट चाइड इस्तेमाल करेंगे और टू लिख देंगे अगर सेकंड वाला यह रहे तो बैकराउंड कर रहा कर दो उसका औ��
5:35
क्लियर कर दो राइट यानि कि भाई मेरे राइट में मुझे कोई बी एलिमेंट नहीं चाहिए इसका यह मतलब है क्लिय��
5:40
तो यह वाला डिव क्या कह रहा है, यह वाला डिव कह रहा है, मुझे मेरे right में कोई element नहीं चाहिए
5:45
किरिपे अगर के मेरे right से कोई भी float अगर हो रहा है, तो हटा लो उसको, मुझे मेरी जगा दे दो
5:50
तो यहाँ पर आप देखो यह कुछ इस तरह से दिखेगा जैसे ही मैंने यहाँ पर clear right किय��
5:54
तो इस वाले div ने यहाँ पर यह वाला जो div है हमारा मैंने nth child 2 किया हुआ ह��
5:59
और मैं देखता हूँ यहाँ पर यह कौन से वाले चाइल्ड को इसने ले लिया ओके तो मुझे n child 3 करना चाहिए था जो कि ये first child है image इसका cards का ये second child है और ये third child है तो ये n child 3 करना चाहिए था तो ये देखो इसने क्या बोला कि यार मुझे मेरे right side पर कोई भी element floating नहीं चाहिए clear right इसने कह दिया तो इसको अपनी जगा नीचे ��
6:31
कर सकते हैं, कि भाई मुझे मेरे दोनों साइट पे कोई element नहीं चाहिए, अगर आपको इस div के left और right दोनों में कोई element नहीं चाहिए, तो आप कह सकते हो clear both, ना left में आएगा, ना right में आएगा, अभी मैंने अगर इसका float left कर दिया right से, तो आप देखना क्या होगा, मैं इसको left ��
7:01
लेफ्ट पे अलाउड है, तो ये लेफ्ट पे अलाउड हो गया, देख लो, लेकिन अगर मैं इसमें क्लियर बोर्थ कर देता हूँ, तो इसका मतलब मेरे ना इदर दिख जाई हूँ, ना इदर दिख जाई हूँ, समझ में आई, ये कह रहा है, एलिमेंट, क्या कह रहा है, न��
7:31
जाएगा बिल्कुल भी तो इसलिए लेफ्ट में दिख रहा है यह लेफ्ट में दिख सकता है इमेज कहता है बाई लेफ्ट में त��
7:36
बना नहीं कर रहा था आपने अगर दोनों जगह मना करना चाहता है तो यह प्लेयर बहुत कर देगा तो प्लेयर लेफ्ट प्लेय��
7:43
लाइट क्लियर बोर्थ करने से जो एलीमेंट है वह मना करता है दिख मत जाएँ मैंने इधर दिख जाएँ ना मेरे इध��
7:48
दिख जाएँ समझ में आई यह बोलता है ना लेफ्ट में दिख जाएँ ना राइट में दिख जाएँ यह बास सब लोग लिखेंग��
8:06
clear देख लिया left, right और both तो मैंने यहाँ पर clear both कर दिया तो ना left
8:10
में दिखेगा ना कुछ right में दिखेगा तो यह कुल मिला कि कुछ basics है अब यहाँ प��
8:14
मैंने आपको बताया कि overflow को किस तरह से खतम किया जाता है उसको खतम करने के और तरीके भी ह��
8:18
� prosthetic पर मैंने यह हटा भी दिया ना इसको मैंने हटा भी दिया ना तो भी तरीके है इसको खत्म करने के और फ्लो को तो क्या तरीके है कि आप लोग मार्जन सेट कर दो या आप इसमें और फ्लो ऑटो कर दो तो तरीके तो बहुत है यार देखो सिंपल सी बात है लेकिन यहां ��
8:48
तो यार यह यह है कि float and clear को भी बिलकुल भी इस्तेमाल करने से मैं avoid करता हूँ, yes मैं clear बोल रहा हूँ बिलकुल, मैं यह भी नहीं कह रहा हूँ कभी कभी कर लेना, मैं एकदम साफ बोल रहा हूँ, ना float यूज़ करो, ना clear यूज़ करो, यह properties आपको आनी चाहिए, ताकि कोई ��
9:18
लेकिन modern layout बनाओ CSS grade से, flexbox से, और भी बहुत सारे तरीके हैं, इस circus में मत पढ़ो, ठीक है
9:25
बिल्कुल भी मत पढ़ो, float left, float right, थोड़ा बहुत confusing हो जाता है, ठीक है, and this is not the right way to create layouts
9:31
in my opinion, मेरा personal opinion है, इससे layout मत बनाओ, इससे styling मत करो, चीजों को इदर उदर मत करो
9:37
तो फ्लेक्स बॉक्स काफी इजी एकदम आसान दो प्रॉपर्टीज में देखेंगे फ्लेक्स वाले वीडियो में कैसे हम लो��
9:43
सेट कर सकते हैं और जो मैं वेबसाइट बनाऊंगा बहुत कम इस्तेमाल करूंगा अगर कर भी लिया तो देखो कर त��
9:48
बताइए मैं फ्री हूं इसको यूज करने के लिए आप भी फ्री है इसको यूज करने के लिए काम तो करता है यह बट बा��
9:54
सिर्फ इतनी सी है कि अगर आपको अच्छी वेबसाइट बनानी है मॉडर लेट बनाने इसको यूज मत करना आज सिंपल एस दा��
10:00
अगर आपको सिग्मा वेब डेव की प्लेलिस्ट नहीं आपको अक्सेस करें यहां क्लिक करके इसको बुक मार्क करे��
10:07
यहां क्लिक करके इसको सेव करें सोर्स कोड को भी अक्सेस करें वीडियो को लाइक करे��
10:11
चैनल को सब्सक्राइब करें शेयर वीडियो को अपने गांव अटाओ की सब्वीन मेरे नाम करें थाइंक यू सो मज़ गैस फू वाचिंग इस वीडिय��
10:16
और आपको नेक्स टाइम देखे��
#Clip Art & Animated GIFs
#Flash-Based Entertainment