Float property, Clear property এর ব্যবহার

Post No:25

আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা float property, clear property এর ব্যবহার সম্পর্কে জানবো।

আমার আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
hashnode.com/@Labib

এক নজরে দেখে নেই, আজ আমরা কি কি শিখবো :

1. Float Property

2. Clear Property

Float property এর 3 টি ভ্যালু আছে-

1. Float:left

2. Float:right

3. Float:none

কোন content / image কে বাম পাশে রাখতে চাইলে আমরা float: left ব্যবহার করতে পারি | আবার কোন content / image কে ডান পাশে রাখতে চাইলে float: right ব্যবহার করতে পারি |

Clear property এর 3 টি ভ্যালু আছে-

1. Clear :left

2. Clear :right

3. Clear :both

যখন আমরা div গুলোকে float ব্যবহার করি তখন ঐ div নিজের অস্তিত্ব হারিয়ে ফেলে সেক্ষেত্রে div গুলা ঠিকমতো কাজ করে না | তাই div গুলার অস্তিত্ব ফিরিয়ে আনতে আমরা clear property ব্যবহার করতে পারি

1.float: right এর ব্যবহার-

প্রথম ধাপ : html ফাইল এ

<div class="sorobindu">
  <img src="https://i.ibb.co/82L9nN1/Untitled-design-2.jpg" alt="Pineapple">
  </p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</p>
</div>

দ্বিতীয় ধাপঃ css ফাইল এ

.sorobindu {
width: 1000px;
margin: auto;
}
.sorobindu img {
float: right;
width: 400px;
}

উপরের এইচটিএমএল কোড গুলা যদি খেয়াল করেন তাহলে আমরা দেখতে পাই যে ইমেজটা প্রথমে ছিল, পরে লেখা ছিল | তাই আউট পুটে ইমেজ প্রথমে এবং লেখাগুলো নিচে দেখানোর কথা ছিল কিন্তু আমাদের আউটপুটে তা আসেনি কারণ আমরা img tag কে float: right ব্যবহার করেছি |

2.float: left & float: right এবং প্রথম div কে

.header-section::after{
content: "";
clear: both;
display: block;
}

এই কোড ব্যবহার করে নিচের ডিজাইন তৈরি করতে পারি …..

নিচে কোড গুলো শেয়ার করা হলো :

প্রথম ধাপ : html ফাইল এ

<section class="header-section">
  <div class="container">
    <div class="header-left">
      <a href="#"><img src="https://i.ibb.co/82L9nN1/Untitled-design-2.jpg" alt="logo"></a>
    </div>
    <div class="header-right">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt maiores eum modi molestias odit natus vero nulla architecto assumenda tempora excepturi magnam,</p>
    </div>
  </div>
</section>
<section class="banner-section">
  <div class="container">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt maiores eum modi molestias odit natus vero nulla architecto assumenda tempora excepturi magnam, beatae et labore totam exercitationem sed aliquid eveniet impedit saepe. Magnam enim repellendus doloremque maxime iusto esse et id nesciunt magni. Optio aliquid, in molestias, illum, quod ad consequuntur possimus dolore officia quis quibusdam culpa dolorum repudiandae facere odit. Numquam tenetur iste accusamus ipsum temporibus, quam architecto quas neque. Iste omnis asperiores expedita suscipit eligendi pariatur optio repellat cumque velit non, iure natus cum similique, qui hic dolor beatae, neque explicabo reprehenderit sit quas voluptate eius! Labore, debitis!</p>
  </div>
</section>

এখানে দুটি সেকশন নেয়া হয়েছে | প্রথম সেকশনের নাম header-section, দ্বিতীয় সেকশনের নাম banner-section | Header-section কে দুই ভাগে ভাগ করা হয়েছে header-left এবং header-right | header-left এর মধ্যে ইমেজ নেয়া হয়েছে এবং header-right এর মধ্যে কিছু লেখা নেয়া হয়েছে | আর Banner-section এরমধ্যে শুধু লেখা নেয়া হয়েছে |

দ্বিতীয় ধাপঃ css ফাইল এ

.container{

width: 1270px;

margin: auto;

}

.header-section{
background-color: #52e455;
padding: 60px 0;
}
.header-section::after{
content: "";
clear: both;
display: block;
}
.header-left {
width: 30%;
float: left;
}
.header-left img {
max-width: 100%;

}
.header-right {
width: 70%;
float: right;
padding-left: 50px;
}
.banner-section{
background-color: rgba(255, 234, 0, 0.871);
padding: 60px 0;
}

এই কোডগুলো থেকে বলতে পারি, যে div গুলোকে float :left, float: right ব্যবহার করবেন তার প্রধান div কে অবশ্যই একটি দেয়াল দিতে হবে না হলে নিচের সেকশনের (banner-section) লেখাগুলো উঠে আসবে | এখানে প্রধান div হিসেবে header-section দেওয়া আছে | আর এই দেয়াল তৈরি করার জন্য আমরা after ব্যবহার করব | আমরা জানি after ব্যবহার করলে অবশ্য content property লিখতে হবে , এর সাথে display: block লিখতে হবে ,তাহলে সম্পূর্ণ width বরাবর দেয়াল পেয়ে যাবে | তার পরেও একটা সমস্যা থেকেই যায় সেটা হল ব্যাকগ্রাউন্ড কালার দিলে তা ঠিকমতো পায় না এর কারণ হলো যখন আমরা ফ্লোট ব্যবহার করেছি তখন ওই div ভাসমান অবস্থায় থাকে তাই ব্যাকগ্রাউন্ড কালার দিলে তা পায় না এই সমস্যা থেকে সমাধান পাওয়ার জন্য clear: both কথাটি লিখতে হয় | clear: both কথাটি লিখলে div গুলো ভাসমান অবস্থায় থাকে না | একটি নির্দিষ্ট জায়গায় অবস্থান করে আর তখন ব্যাকগ্রাউন্ড কালার দিলে ঠিকমতো কালার পাই |

উদাহরণ হিসেবে বলতে পারি, প্রথম div (header-section) কে

.header-section::after{
content: "";
clear: both;
display: block;
}

এই কোড ব্যবহার না করলে ,ডিজাইনটি নষ্ট হয়ে যাবে | আউটপুট নিচের ছবির মত দেখাবে