সিএসএস ফ্লোট প্রপার্টি একটি বক্স বা বিষয়বস্তু অবস্থান বা বিন্যাস করার জন্য ব্যবহৃত হয়। বিকাশকারী সিএসএস ফ্লোট দিয়ে বাম বা ডান দিকে উপাদান অবস্থান করতে পারে।
ফ্লোট সম্পত্তিতে নিম্নলিখিত মানগুলির মধ্যে একটি থাকতে পারে −
- বামে − উপাদানটি তার ধারকটির বাম দিকে ভাসছে
- ডান − উপাদানটি তার ধারকটির ডানদিকে ভাসছে
- কোনটিই নয় - উপাদানটি ভাসছে না। এটি ডিফল্ট মান
- উত্তরাধিকার − উপাদানটি তার পিতামাতার ফ্লোট মান উত্তরাধিকার সূত্রে পায়
উদাহরণ
আসুন CSS ফ্লোট প্রপার্টি -
এর একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<title>CSS Float</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
#container {
display: flex;
flex-direction: column-reverse;
justify-content: center;
align-items: center;
}
.child{
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.orange{
background-color: #FF8A00;
}
.red{
background-color: #F44336;
}
.violet{
background-color: #C303C3;
}
.green{
background-color: #4CAF50;
}
.blue{
background-color: #03A9F4;
}
.yellow{
background-color: #FEDC11;
}
#left{
display: flex;
float: left;
}
#right{
display: flex;
float: right;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Float</legend>
<div id="container">
<div class="child orange"></div><div class="child red"></div><div class="child violet"></div><div class="child green"></div><div class="child blue"></div><div class="child yellow"></div>
</div><br>
<input type="button" value="float-->left" onclick="floatDecider('left')">
<input type="button" value="float-->right" onclick="floatDecider('right')">
<div><div id="left"></div><div id="right"></div></div>
</fieldset>
</form>
<script>
var left = document.getElementById('left');
var right = document.getElementById('right');
function floatDecider(direction){
var allChildren = document.getElementsByClassName('child');
if(direction === 'left')
left.insertAdjacentElement('beforeend',allChildren[0]);
else
right.insertAdjacentElement('afterbegin',allChildren[0]);
}
</script>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবেযেকোনো বোতামে ক্লিক করার আগে −
'float-->বামে ক্লিক করা হচ্ছে৷ ’ বোতাম ৪ বার −
'float-->ডানদিকে ক্লিক করা হচ্ছে৷ t’ বোতাম -
