আমরা ফ্লোটেড এলিমেন্টের সাইড নির্দিষ্ট করতে CSS ক্লিয়ার প্রপার্টি ব্যবহার করতে পারি যা প্রবাহিত বিষয়বস্তু থেকে সাফ করতে হবে।
উদাহরণ
আসুন CSS ক্লিয়ার প্রপার্টি -
এর একটি উদাহরণ দেখি<!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 ক্লিয়ার প্রপার্টির আরেকটি উদাহরণ দেখি -
<!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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
