CSS clear প্রোপার্টি ব্যবহার করে ফ্লোটেড এলিমেন্টের কোন সাইডটি ফ্লোইং কন্টেন্ট থেকে ক্লিয়ার করা উচিত তা স্পেসিফাই করা যায়।
উদাহরণ
CSS clear প্রোপার্টির একটি উদাহরণ:
<!DOCTYPE html> <html> <head> <title>CSS Clear</title> <style type="text/css"> .clear { clear: left; } .yellow{ background-color: #FF8A00; } .red{ background-color: #F44336; } .green{ background-color: #4CAF50; } p { float: left; margin: 10px; padding: 10px; color:white; } </style></head> <body> <p class="red">Important Notice</p> <p class="clear red">Important Notice</p> <p class="yellow">Mediocre Notice</p> <p class="green">Ignorable Notice</p> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট তৈরি করবে:
আরেকটি উদাহরণ
CSS clear প্রোপার্টির আরেকটি উদাহরণ:
<!DOCTYPE html> <html> <head> <title>CSS Clear</title> <style type="text/css"> p { float: left; margin: 10px; padding: 10px; color:white; background-color: #48C9B0; border: 4px solid #145A32; } p.noneFloat{ float: none; clear: both; color: #34495E; } </style></head> <body> <p>I am okay with shared space</p> <p class="noneFloat">I want a private space</p> <p>I am also okay with shared space</p> <p>Me too</p> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট তৈরি করবে:
