प्रौद्योगिकी साझेदारी

html इत्यस्य फ्लोटिंग् फंक्शन् इत्यस्य विस्तृतं व्याख्यानम्

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

HTML मध्ये "Float" इति CSS विन्यासप्रौद्योगिकी अस्ति या मूलतः पाठस्य कृते चित्राणि लपेटयितुं वा सरलविन्यासप्रभावं प्राप्तुं वा, यथा तत्त्वानां पार्श्वे पार्श्वे व्यवस्थापनार्थं, डिजाइनं कृतम् आसीत् परन्तु यथा यथा जालविकासस्य विकासः जातः तथा तथा आधुनिक CSS अधिक उन्नतविन्यासविधिः (यथा Flexbox तथा Grid) प्रदाति चेदपि अधिकजटिलपृष्ठविन्यासनिर्माणेषु फ्लोट्-इत्यस्य व्यापकरूपेण उपयोगः अपि अभवत्

प्लवमानस्य मूलकार्यम्

  1. पाठवेष्टनम् : एषः प्लवकानां मौलिकतमः सहजः च अनुप्रयोगः अस्ति । यदा कश्चन चित्रः (अथवा अन्यः खण्ड-स्तरीयः तत्त्वः) प्लवितुं सेट् भवति तदा सामान्यदस्तावेजप्रवाहेन (ऊर्ध्वतः अधः, वामतः दक्षिणतः) निरन्तरं न कृत्वा परितः पाठः तस्य परितः प्रवहति

  2. पार्श्वे पार्श्वे विन्यासः : बहुषु तत्त्वेषु floats सेट् कृत्वा, पूर्वनिर्धारितरूपेण stacked इत्यस्य स्थाने पार्श्वे पार्श्वे व्यवस्थापयितुं शक्नुवन्ति । एतत् नेविगेशन-पट्टिकाः, चित्र-सङ्ग्रहालयाः, अथवा यत्किमपि विन्यासं निर्माति यत्र तत्त्वानां क्षैतिजरूपेण व्यवस्थापनस्य आवश्यकता भवति तदा एतत् उपयोगी भवति ।

float इत्यस्य उपयोगः कथं भवति

  • CSS गुणाः:उत्तीर्णःfloat तत्त्वान् प्लवितुं गुणाः।एषः गुणः अनेकमूल्यानि स्वीकुर्वितुं शक्नोति, यथाleft、right、none(पूर्वनिर्धारितं, न प्लवम् इत्यर्थः) तथाinherit(मातृतत्त्वात् उत्तराधिकारःfloatमूल्यम्‌)।

  • उदाहरण：

    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.   <style>  
    5.     .float-left {  
    6.       float: left;  
    7.       width: 50%;  
    8.     }  
    9.     .float-right {  
    10.       float: right;  
    11.       width: 50%;  
    12.     }  
    13.   </style>  
    14. </head>  
    15. <body>  
    16.  
    17. <div class="float-left">左边的内容</div>  
    18. <div class="float-right">右边的内容</div>  
    19.  
    20. </body>  
    21. </html>

  • अस्मिन् उदाहरणे द्वे<div>तत्त्वानि मार्गेण सेट् भवन्तिfloat: left;तथाfloat: right;पार्श्व-पार्श्व-विन्यासः कार्यान्वितः।

  • प्लवमान प्रभाव

  • दस्तावेजप्रवाहात् बहिः भङ्गं कुर्वन्तु: प्लविताः तत्त्वानि सामान्यदस्तावेजप्रवाहात् बहिः निष्कासितानि भवन्ति, अर्थात् ते मूलतः यत् स्थानं धारयन्ति स्म तत् स्थानं न धारयन्ति, अन्ये च अप्लविताः तत्त्वानि तेषां उपस्थितिम् अवहेलयन्ति, तेषां त्यक्तानि अन्तरालानि पूरयन्ति च

  • अनन्तरतत्त्वेषु प्रभावः: प्लविततत्त्वस्य अनुसरणं कुर्वन्तः अप्लविताः तत्त्वानि प्लवमानेन तत्त्वेन अवशिष्टं स्थानं पूरयितुं प्रयतन्ते, परन्तु प्लवितं तत्त्वं स्वयं तदनन्तरं तत्त्वस्य सामग्रीं सीमां वा न आच्छादयिष्यति

  • स्पष्ट प्लव: अनन्तरं विन्यासे प्लवनस्य अप्रत्याशितप्रभावं परिहरितुं प्रायः प्लवमानस्य स्वच्छतायाः पद्धतिः, यथा उपयोगः, उपयोक्तुं आवश्यकः भवतिclear: both;विशेषताः, छद्म-तत्त्व-निष्कासनं, अथवा नूतनं खण्ड-स्तरीयं प्रारूपण-सन्दर्भं निर्मातुं (यथा उपयोगःoverflow: auto;वाdisplay: flex;）。

सारांशं कुरुत

यद्यपि जालविकासे फ्लोट् इत्येतत् महत्त्वपूर्णविन्यासप्रविधिषु अन्यतमम् अस्ति तथापि ते केचन जटिलताः सीमाः च आनयन्ति । Flexbox तथा Grid इत्यादीनां आधुनिक CSS विन्यासप्रौद्योगिकीनां उद्भवेन जटिलविन्यासेषु फ्लोट्-प्रयोगः क्रमेण न्यूनीकृतः, परन्तु केषुचित् सरलपरिदृश्येषु अथवा परियोजनासु येषु पुरातनब्राउजरैः सह पश्चात्तापसङ्गतिः आवश्यकी भवति, तेषु फ्लोट्-इत्येतत् अद्यापि उपयोगी साधनम् अस्ति

भविष्ये अपि प्रासंगिकसामग्रीम् अद्यतनं साझां च करिष्यामः।ध्यानं दातुं स्मर्यताम् !

व्यक्तिगत प्रोफाइल

सः ३० वर्षाणाम् अधिकं कालात् प्रौद्योगिक्याः शोधकार्यं कर्तुं समर्पितः अस्ति, तथा च जावा, लिनक्स, जावास्क्रिप्ट्, php, css इत्यादिषु विविधभाषासु प्रवीणः अस्ति, मुक्तस्रोतक्षेत्रे सः बहु योगदानं कृतवान् अस्ति विकासक दस्तावेजीकरणस्थानकं भविष्ये सन्दर्भार्थं प्रौद्योगिकीविकासे केचन विषयाः साझां कर्तुं सर्वे तत् पश्यन्तु

मम सम्पर्कसूचना

मेल