সিএসএস ফ্লট টিউটোরিয়াল (CSS Float Tutorial in Bangla )

 

লেআউট তৈরীর সময় সিএসএস ফ্লট দিয়ে সবচেয়ে গুরত্বপূর্ন কাজটি করা হয়। এছাড়া লেখা আর ছবি একসাথে থাকলে সেখানে ফ্লট ব্যবহার করা হয়। float এর মুলত দুটি মান দেয়া যায় left এবং right. left দিলে এলিমেন্ট টিকে ঠেলে বামে নিয়ে আসবে আর right দিলে ডানে নিয়ে যাবে। যেমন একটা ইমেজ বা ছবি যদি লেখার বামে নিতে চাই যেমন পত্র পত্রিকায় লেখার সাথে ছবি থাকে তাহলে

1.img {

2.float: left;

3.}

float:right দিন ছবিটি ডানে চলে যাবে।

** float দিয়ে এলিমেন্ট গুলিকে পাশাপাশি (আড়াআড়িভাবে) বা side-by-side বসানো যায়। float সবসময় আড়াআড়িভাবে কাজ করে।

সাধারনত এইচটিএমএল এ এলিমেন্টগুলি লম্বালম্বি ভাবে একটার পর একটা অবস্থান করে যেমন অনেকগুলি li, p বা div ইত্যাদি। এখন এগুলিকে পাশাপাশি আনতে অর্থ্যাৎ একটার ডানে আরেকটা এভাবে ব্রাউজারের শেষ পর্যন্ত আনতে float:left; দিলে কাজ করবে।

** যেকোন ব্লক লেভেল এলিমেন্ট ব্রাউজারের বা থেকে ডানে শেষ পর্যন্ত জায়গা দখল করে থাকে ফলে ব্লক লেভেল এলিমেন্টের পাশে অন্য আরেকটা ব্লক লেভেল এলিমেন্ট ঢোকেনা। তবে যখন float দিবেন তখন এলিমেন্টের কনটেন্ট পরিমান জায়গা নিয়ে বাকি জায়গা সে অন্য floated এলিমেন্টের জন্য ছেড়ে দিবে।

লেআউট তৈরীর সময় কোন ডিভের পাশে কোন ডিভ হবে এসব ফ্লট দিয়ে ঠিক করা হয়। যেমন

01..header{

02.float:left;

03.width : 100%;

04.border: 1px solid;

05.height: 100px;

06.}

07..left_menu{

08.width : 24.999%;

09.float:left;

10.border: 1px solid;

11.height: 250px;

12.clear: both;

13.}

14..content{

15.float: left;

16.width: 74%;

17.border: 1px solid;

18.height: 250px;

19. 

20.}

21..footer{

22.float:left;

23.width:100%;

24.border: 1px solid;

25.height: 100px;

26.}

** float এর বাই ডিফল্ট মান none থাকে।

clear একটা প্রোপার্টিজ আছে এটা দিয়ে floated এলিমেন্ট সরানো যায়। left, right এবং both মানগুলি ব্যবহার করে বামে, ডানে অথবা উভয়দিকের floated এলিমেন্ট সরিয়ে ফেলা যায়। একটা  floated এলিমেন্টের কোনদিকে floated এলিমেন্ট থাকবে আর কোনদিকে থাকবেনা এটা clear প্রোপার্টিজ দিয়ে ঠিক করা যায়। যেমন

01.body {

02.width: 400px;

03.margin: 1em auto;

04.}

05. 

06.h1 {

07.float: left;

08.margin-top: 0;

09.}

10. 

11..navigation {

12.float: right;

13.margin: 0;

14.list-style: none;

15.}

16. 

17..navigation li {

18.float: left;

19.}

20. 

21..navigation a {

22.display: block;

23.margin-left: 0.5em;

24.padding: 5px;

25.border: 1px solid #000;

26.color: #000;

27.text-decoration: none;

28.}

29..ntext{

30.clear: both;

31.}

** clear:both; উঠিয়ে দিয়ে দেখুন লেখাগুলি মেনুর আশেপাশে এলোমেলোভাবে দেখাবে।