सीखिए CSS में CSS float and clear properties का use करना। Vivaa Technologies के साथ web layouts को आसानी से design करना master करें।
CSS Float and Clear Properties: Web Layouts Master करें
Web development की दुनिया में जब हम web layouts design करते हैं, तो UI elements को सही alignment में set करना बहुत important होता है। अगर आप web development सीख रहे हैं, तो आपने CSS float and clear properties के बारे में ज़रूर सुना होगा। Vivaa Technologies के इस detailed blog post में हम आज समझेंगे कि यह properties कैसे work करती हैं और CSS float and clear का use करके आप clean layouts कैसे बना सकते हैं।
CSS Float Property क्या है?
Float एक ऐसी CSS property है जो किसी HTML element को उसके container के left या right side में push करने के लिए use होती है। जब आप किसी element पर float apply करते हैं, तो आसपास के text या inline elements उस floated element के चारों तरफ wrap हो जाते हैं।
Float की main values निम्नलिखित हैं:
float: left;- Element को container के left side shift करता है।float: right;- Element को container के right side shift करता है।float: none;- यह default value है जिसमें element normal document flow में रहता है।float: inherit;- यह parent element की float property को inherit करता है।
Example Code:
CSS
.card-left {
float: left;
width: 50%;
}
Clear Property का Use क्यों करते हैं?
जब हम किसी element पर float apply करते हैं, तो उसके नीचे आने वाले elements floated element के खाली space में shift होने की कोशिश करते हैं। इससे layout design break हो सकता है। इस problem को prevent करने के लिए clear property का use किया जाता है।
clear property यह define करती है कि element के किस side floated elements allowed नहीं हैं:
clear: left;- Left floated element के नीचे new line पर move करता है।clear: right;- Right floated element के नीचे move करता है।clear: both;- Both left और right floated elements के नीचे element को push कर देता है।clear: none;- Default value.
Example Code:
CSS
.footer-section {
clear: both;
}
Float Collapse issue और Clear fix Solution
जब आप किसी parent container के सभी child elements को float कर देते हैं, तो parent container की height collapse होकर zero हो जाती है। इसे fix करने के लिए standard clear fix hack use किया जाता है:
CSS
.clearfix::after {
content: "";
clear: both;
display: table;
}
आप parent div पर overflow: auto; का use करके भी layout overflow fix कर सकते हैं।
Conclusion
Modern CSS में Flexbox और Grid popular techniques हैं, फिर भी CSS float and clear की solid knowledge होना legacy code bases और CSS layouts को debug करने के लिए बहुत ज़रूरी है। Web development सीखने और अपनी full-stack skills को enhance करने के लिए Vivaa Technologies के साथ जुड़ें!
