CSS Float Property
Introduction to CSS Float Property
किसी समाचार पत्र को पढ़ते समय आपने देखा होगा की एक text का column होता है और उस column में उसी text से सम्बंधित एक image भी होती है जो left या right side में float होती है। कई बार text books में भी ऐसा होता है की किसी image के चारों तरफ text होता है और वह image left या right side में float होती है।
इससे reader को पता रहता है की दी गयी image text से सम्बंधित है और इसके अलावा इससे एक beautiful layout भी create होता है जो reader को अजीब नहीं लगता है। यदि image को separately show किया जाए तो वह अधिक जगह भी घेरती है और उससे layout भी ख़राब हो जाता है।
समाचार पत्र और पुस्तकों में यह कार्य text editor द्वारा किया जाता है लेकिन यदि आप ऐसा layout web page में create करना चाहते है तो इसके लिए आप CSS की float property use कर सकते है।
Float property के द्वारा किसी element को left या right में float किया जाता है जिससे उसके आसपास के elements उसे चारों तरफ से घेर लेते है। इससे column layouts create हो जाते है जो webpage को और भी beautiful बनाते है।
मूल रूप से float property को एक simple layout create करने के लिए design किया गया था जिसमें एक image एक text column (container) के अंदर float होती है। जैसा समाचार पत्र या text books में आप देखते है।
लेकिन web developer को आवश्यकता महसूस हुई की images की तरह ही दूसरे element को भी float किया जा सके और इसके बाद यह property images के अलावा दूसरे element को float करने के लिए use कि जाने लगी।
अब यह property web developers द्वारा सबसे अधिक use की जाने वाली properties में से एक है। इस property के द्वारा आप webpage में elements को float करके oragnize कर सकते है।
Syntax of CSS Float Property
CSS float property का general syntax निचे दिया जा रहा है।
float : left | right | none | initial | inherit;
जैसा की ऊपर दिए गए syntax में बताया गया है float property की 5 possible values हो सकती है। इनके बारे में निचे बताया जा रहा है।
- left - इस value से element left side में float होता है।
- right - इस value से element right side में float होता है।
- none - इस value से element float नहीं होता है और जिस sequence में उसे place किया गया उसी sequence में वह show होता है।
- initial - इस value से default value से property set हो जाती है।
- inherit - इस value से property की parent element से inherit की जाती है।
Example of CSS Float Property
CSS float property को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS Float Demo</title>
</head>
<body>
<article>
Best Hindi Tutorials is a website of Computer Science and IT Tutorials. In this website all tutorials are written in Hindi language. Its very easy to learn in Hindi when compared to a foreign language. All tutorials are concept based. And writer have tried his best to make the reader understand topic clearly and easily. Writer has worked in many companies in cities like Hyderabad and Delhi. Nowadays he works for himself. He is freelance developer and writer. Best Hindi Tutorials aims to help all the students and IT professionals who are new in this field and try to learn new subjects. You can join us on Facebook and Google plus. You can also become a member of our email list. You can contact us anytime through contact form.
</article>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
