Introduction of CSS Float and Clear in hindi
इस tutorial मे हम CSS Float and Clear in Hindi के बारे मे detail मे जानेंगे। जब हम MS Word या अन्य text editor मे कोई document बनाते है जिसमे image एक तरफ जैसे के left या right होती है और content एक तरफ होता है।
लेकिन Web page मे इस कार्य को करने के लिए Float property का इस्तेमाल होता है। CSS Float property के द्वारा image को left या right Float कर सकते है। इस Property के द्वारा HTML के Block Level Element को भी Float कर सकते है।
Float property के द्वारा elements को left या right side ही float कर सकते है। इससे ऊपर या नीचे float नहीं कर सकते।
The float Property
Float Property की मदद से Content की Positioning और Formatting कर सकते है। Float Property की different value के बारे मे नीचे बताया गया है।
- Left – इसकी मदद से Element left side float होता है।
- right – इसकी मदद से Element right side float होता है।
- none – यह default value है। इसकी मदद से content float नहीं होता है बल्कि page के normal flow मे show होता है।
- inherit – यह value देने से वह element अपने parent element की float value लेता है।
Example – float: left;
यह example दर्शाता है की image text के left side float होती है।
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<h3>CSS Float and Clear in Hindi</h3>
<p><img src="https://compressjpeg.com/images/compressjpeg/icon.png" alt="Megatechbook">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>Example – float: right;
यह example दर्शाता है की image text के right side float होती है।
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<h3>CSS Float and Clear in Hindi</h3>
<p><img src="https://compressjpeg.com/images/compressjpeg/icon.png" alt="Megatechbook">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>Example – float: none;
यह float की bydefault value है। यह example दर्शाता है की image और text आपने जहा पर show किया है वही show होगा।
उदाहरण
<html>
<head>
<style>
img {
float: none;
}
</style>
</head>
<body>
<h3>CSS Float and Clear in Hindi</h3>
<p><img src="https://compressjpeg.com/images/compressjpeg/icon.png" alt="Megatechbook">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>The Clear Property
जब हमने float property का use किया है और हम next element को नीचे दिखाना चाहते है तब clear property का use होता है।
मतलब की Floating element के next element के साथ क्या करना है वह हम clear property की मदद से decide करते है।
Clear property की value को नीचे बताया गया है।
- none – यह default value है। इसकी मदद से element को left या right float किया जा सकता है।
- left – इसकी मदद से element को left float नहीं किया जा सकता है।
- right – इसकी मदद से element को right float नहीं किया जा सकता है।
- both – इसकी मदद से element को left या right float नहीं किया जा सकता है।
- inherit – यह value देने से वह element अपने parent element की value लेता है।
उदाहरण
<html>
<head>
<style>
.div1 {
float: left;
padding: 8px;
border: 3px solid red;
}
.div2 {
padding: 8px;
border: 3px solid red;
}
.div3 {
float: left;
padding: 8px;
border: 3px solid red;
}
.div4 {
padding: 8px;
border: 3px solid red;
clear: left;
}
</style>
</head>
<body>
<h3>Without clear</h3>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>
<h3>With clear</h3>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>
</body>
</html>