كيفية عمل الخاصية float
تعمل الخاصية float على تعويم العناصر إلى اليسار أو اليمين ولكن تطبق هذه الخاصية فقط على العناصر التي لا تحتوي على القيمة absolute للخاصية position. أي عنصر تطبق عليه الخاصية float سوف يتدفق حول العنصر العائم على الجانب الآخر.
قد تحتوي الخاصية float على إحدى القيم الثلاث:
| القيمة | الوصف |
|---|---|
| left | تعمل على تعويم العنصر على الجانب الأيسر من الصندوق الذي يحتويه. |
| right | تعمل على تعويم العنصر على الجانب الأيمن من الصندوق الذي يحتويه. |
| none | تعمل على إزالة تأثير الخاصية float نهائيا |
كيف تعوم العناصر
يتم إخراج العنصر العائم من التدفق الطبيعي وتحويله إلى اليسار أو اليمين بقدر الإمكان في المساحة المتاحة للعنصر المحتوي (الأب).
تتدفق العناصر الأخرى عادةً حول العناصر الطافية ، ما لم يتم منعها من القيام بذلك من خلال الخاصية clear . يتم تعويم العناصر أفقيًا ، مما يعني أنه لا يمكن تعويم العنصر إلا لليسار أو اليمين ، وليس لأعلى أو لأسفل.
<!DOCTYPE html>
<html>
<head>
<base href="https://educationfactorys.com/"/>
<meta charset="utf-8">
<title>العناصر العائمة</title>
<style>
body {
font-size:24px;
}
img {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
}
</style>
</head>
<body>
<p><img src="examples/images/animals/Rabbit.png" alt="Rabbit"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
</body>
</html>
المخرجات
إذا تم وضع العديد من العناصر العائمة بالقرب من بعضها البعض ، فسوف تعوم بجانب بعضها البعض إذا كانت هناك مساحة أفقية كافية. إذا لم تكن هناك مساحة كافية لتعوم ، فسيتم إزاحتها للأسفل. لنلقي نظرة على المثال التالي الذي يحتوي على مجموعة من العناصر العائمة.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="https://educationfactorys.com/"/>
<title>العناصر العائمة</title>
<style>
ul{
margin: 0;
padding: 0;
list-style: none;
}
.thumbnail {
float: left;
margin: 5px;
}
</style>
</head>
<body>
<ul>
<li class="thumbnail"><img src="examples/images/animals/Deer.png" alt="Deer"></li>
<li class="thumbnail"><img src="examples/images/animals/Koala.png" alt="Koala"></li>
<li class="thumbnail"><img src="examples/images/animals/Rabbit.png" alt="Rabbit"></li>
<li class="thumbnail"><img src="examples/images/animals/Raccoon.png" alt="Raccoon"></li>
<li class="thumbnail"><img src="examples/images/animals/Tiger.png" alt="Tiger"></li>
<li class="thumbnail"><img src="examples/images/animals/Bear.png" alt="Bear"></li>
</ul>
</body>
</html>
المخرجات
إيقاف تعويم العناصر باستخدام الخاصية Clear
العناصر التي تأتي بعد العنصر العائم سوف تتدفق حوله. تحدد الخاصية clear أي من جوانب صندوق العنصر لا تسمح بالعناصر العائمة الأخرى.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>الخاصية clear</title>
<style>
body {
font-size:20px;
}
.clear {
clear: left;
}
p {
float: left;
margin: 10px;
padding: 10px;
background: #aad3ee;
}
</style>
</head>
<body>
<p>عائم إلى اليسار</p>
<p class="clear">هذا العنصر لا يسمح بالعناصر العائمة على يساره</p>
</body>
</html>
المخرجات
