CSS Float Property in Hindi

Table of Contents hide

जब कोई element browser में render होता है, तब वो by-default, top-left direction में अपनी जगह लेता है | पर कई बार ऐसी requirement होती है की हम elements को right direction में सेट करना चाहते हैं |

जैसे content को left रखना चाहते हैं और उससे related image को right में दिखाना चाहतें हैं | ऐसे में float property काम आता है |

float property DOM elements की rendering direction को change करने के लिए उपयोग होता है |

Syntax:

float:left/right;

उदाहरण:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Float Property</title>
        <style>
        .parentDiv{
            background-color: #ccc;
            border: 1px solid black;
            width: 500px;
            height: 200px;
            margin: 20px auto;
            padding: 5px 15px;            
        }
        .div1,.div2{
            border: 1px solid black;
            color: white;
            text-align: center;
            margin: 20px 10px;
            padding: 2px;
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: darkgoldenrod;
            float: left;
        }
        .div2{
            background-color:lightsalmon;
            float: right;
        }
    </style>
    </head>
    <body>
        <div class="parentDiv">
            <div class="div1">Block1</div>
            <div class="div2">Block2</div>
        </div>
    </body>
</html>

उदाहरण में देखिये हमने दो <div> tag लिया है | <div> tag हमेसा एक नयी line से सुरु होती है | पर हमने float property के जरिये पहली <div> को left में और दूसरी <div> को right में सेट किया है |

output

Float Property Features

elements जिनकी float property left सेट की जाती है वो elements, container की left side में render करतें हैं और elements जिनकी float property right सेट की जाती है वो elements, container की right side में render करतें हैं |
कई सारे continuous elements चाहे वो block elements हो या inline elements हो, अगर उन्हें एक साथ float property दी गयी हो, तब वो एक साथ एक ही line में render होंगे | ऐसे में वो अपना default rendering behaviour को follow नहीं करेते हैं |

उदाहरण के लिए continuous <div> tags को अगर float:left सेट कर दिया जाए तो वो सारे <div> tags एक ही line में आ जायेंगे | जब की <div> tag हमेसा नयी line से सुरु होता है, पर float property से वो एक ही लाइन में आ जायेंगे |

उदाहरण

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Float Property</title>
        <style>
        .parentDiv{
            background-color: #ccc;
            border: 1px solid black;
            width: 600px;
            height: 200px;
            padding: 5px 5px;  
            overflow: auto;
            margin: auto;       
        }
        .div1,.div2,.div3,.div4{
            border: 1px solid black;
            color: white;
            text-align: center;
            padding: 2px;
            width: 80px;
            height: 80px;
        }
        .div1{
            background-color: rgb(243, 177, 11);
            float: left;
        }
        .div2{
            background-color:rgb(122, 255, 140);
            float: left;
        }
        .div3{
            background-color:rgb(122, 175, 255);
            float: left;
        }
        .div4{
            background-color:rgb(219, 56, 151);
            float: left;
        }
    </style>
    </head>
    <body>
        <div class="parentDiv">
            <div class="div1">Block1</div>
            <div class="div2">Block2</div>
            <div class="div3">Block3</div>
            <div class="div4">Block4</div>
        </div>
    </body>
</html>

output

उदाहरण में देखिये चारों <div> tags की float property, left सेट करने की वजह से वो सब नयी लाइन में render होने की वजाए एक ही line में render हुए हैं |

CSS Clear Property in Hindi

float property के जरिये जब हम किसी dom elements की direction को बदलतें हैं तब इसके बाद वाले element भी अपनी position छोड़ कर इससे पहली वाली element के line में आने की कोसिस करते हैं | इससे फिर webpage में elements सही से arrange नहीं दीखते हैं |

इस defect को ठीक करने के लिए Clear Property का इस्तेमाल किया जाता है | जिस element में float property लगी हो उसकी बाद वाली element में clear property लगायी जाती है ताकि वो अपनी position में render हो सके |

Syntax:

clear:left/right/both;

उदाहरण

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Float Property</title>
        <style>
        .parentDiv{
            background-color: #ccc;
            border: 1px solid black;
            width: 600px;
            height: 300px;
            padding: 5px 5px;  
            overflow: auto;
            margin: auto;       
        }
        .div1,.div2,.div3,.div4{
            border: 1px solid black;
            color: white;
            text-align: center;
            margin: 5px;
            width: 80px;
            height: 80px;
        }
        .div1{
            background-color: rgb(243, 177, 11);
            float: left;
        }
        .div2{
            background-color:rgb(6, 122, 22);
            float: right;
        }
        .div3{
            background-color:rgb(122, 175, 255);
            clear: left;            
        }
        .div4{
            background-color:rgb(219, 56, 151);
        }
    </style>
    </head>
    <body>
        <div class="parentDiv">
            <div class="div1">Block1</div>
            <div class="div2">Block2</div>
            <div class="div3">Block3</div>
            <div class="div4">Block4</div>
        </div>
    </body>
</html>

output

उदाहरण में देखिये div2 की float property right होने की वजह से वो right direction में render हो रही है | पर div3 को हमे उसकी सही जगह पे रखना था यानि वो अपनी नयी लाइन से ही सुरु हो | पर div2 की वजह से div3 rendering direction बदल सकती थी |

इसीलिए clear:left सेट करके div3 को उसकी सही जगह पे सेट की गयी है |

clear property के जरिये float property से हो रहे परेशानी को संभाला जाता है | ज्यादातर इसमें clear:both value को इस्तेमाल कीया जाता है ताकि दोनों direction वाले elements से बाकी के elements पे कोई असर ना हो |

Float Property in CSS in Hindi – CSS Clear Property क्या है?