সিএসএস float প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| float | ১.০ | ৪.০ | ১.০ | ১.০ | ৭.০ |
সংজ্ঞা ও ব্যবহার
float প্রোপার্টির মাধ্যমে কোন একটি বক্স বা এলিমেন্ট float হবে নাকি হবে না নির্দিষ্ট করা হয়।
পরামর্শঃ
- Absolute পজিশনযুক্ত এলিমেন্টে float প্রোপার্টিটি কাজ করে না।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| none | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
float: none/left/right/initial/inherit;
ইমেজকে ডানে float করি:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p> নিচের প্যারাগ্রাপ এর মধ্যে, স্টাইল সহ একটি ইমেজ যুক্ত করতে পারি। <b>float:right</b>.
এর ফলে ইমেজটি প্যারাগ্রাপ এর ডানদিকে ভাসবে।</p>
<p>
<img src="../cssref_exaples/satt.png" width="100" height="80" />
কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারেরর ডিজিটাল হিসাবে দেখতে চাইলে
সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে।
কিন্তু আমরা জেলাশহরে থাকার কারণে এবং রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে
আমরা যেমন ওয়েব ডিজাইন এবং ডেভেলোপমেন্ট/এন্ড্রয়েড/ আই ও এস অ্যাপ্স তৈরির কথা চিন্তাও করতে পারিনা।
এসব সমস্যার সমাধান হিসাবে স্যাট -এর জন্ম। স্যাট একাডেমী সম্পূর্ণ বিনামূল্যে ওয়েব ডিজাইন
এবং ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।
</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.cssFloat="left"উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
width: 50px;
height: 50px;
border: 1px solid black;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<p> "চেষ্টা করি" বাটনে ক্লিক করলে div এর এলিমেন্টটি বামদিকে float হবেঃ</p>
<button onclick="myFunction()">উদাহরণ দেখুন </button>
<div id="thisDiv">স্যাট</div>
<div>স্যাট একাডেমীঃ এটি শুধুমাত্র একটা একাডেমীর নাম না। এটি ভালবাসার , অনুপ্রেরনার ,
সাহসিকতার ও বিশ্বাসের নাম। আমাদের বিশ্বাস আমরা একদিন বিশ্বজয় করব। ইনশাআল্লাহ।</div>
<script>
function myFunction() {
document.getElementById("thisDiv").style.cssFloat = "left";
}
</script>
<p><b>নোটঃ </b>JavaScript এর মধ্যে CSS এর "float প্রোপার্টিটিকে "cssFloat" বলা হয় কারন "float" JavaScript এর মধ্যে একটি reserved শব্দ।</p>
</body>
</html>
ফলাফল
float প্রোপার্টির ভ্যালু-সমূহ
- none - এলিমেন্টটি float হবে না এবং এটা টেক্সটের যে স্থানে ছিল, সেখানেই প্রদর্শন করবে। এটাই float প্রোপার্টির ডিফল্ট ভ্যালু।
- left - এলিমেন্টটি বামে float হয়।
- right -এলিমেন্টটি ডানে float হয়।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
float প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।