خاصية تعويم CSS
مثال
دع الصورة تطفو إلى اليمين:
img
{
float: right;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تحدد الخاصية ما floatإذا كان يجب أن يطفو العنصر إلى اليسار أم اليمين أم لا على الإطلاق.
ملاحظة: تتجاهل العناصر المتوضعة تمامًا floatالخاصية!
ملاحظة: ستتدفق العناصر الموجودة بجوار العنصر العائم حوله. لتجنب ذلك ، استخدم الخاصية clear أو clearfix hack (انظر المثال في أسفل هذه الصفحة).
| القيمة الافتراضية: | لا أحد |
|---|---|
| وارث: | رقم |
| متحرك: | رقم. اقرأ عن animatable |
| الإصدار: | CSS1 |
| بناء جملة JavaScript: | الكائن .style.cssFloat = "اليسار" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
| Property | |||||
|---|---|---|---|---|---|
| float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
بنية CSS
float: none|left|right|initial|inherit;
قيم الملكية
| Value | Description | Play it |
|---|---|---|
| none | The element does not float, (will be displayed just where it occurs in the text). This is default | |
| left | The element floats to the left of its container | |
| right | The element floats the right of its container | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
دع الصورة تطفو إلى اليسار:
img
{
float: left;
}
مثال
دع الصورة تُعرض فقط في مكان ظهورها في النص (عائم: لا شيء):
img
{
float: none;
}
مثال
دع الحرف الأول من الفقرة يطفو إلى اليسار ونمط الحرف:
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
مثال
استخدم عائم مع قائمة من الارتباطات التشعبية لإنشاء قائمة أفقية:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
مثال
استخدم عوامة لإنشاء صفحة رئيسية بها رأس وتذييل ومحتوى يسار ومحتوى رئيسي:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
مثال
لا تسمح بالعناصر العائمة على الجانب الأيسر أو الأيمن من عنصر <p> محدد:
img {
float: left;
}
p.clear {
clear: both;
}
مثال
إذا كان العنصر العائم أطول من العنصر الذي يحتويه ، فسيتم تجاوزه خارج الحاوية الخاصة به. من الممكن إصلاح ذلك باستخدام "clearfix hack":
.clearfix::after {
content: "";
clear: both;
display: table;
}
الصفحات ذات الصلة
برنامج CSS التعليمي: CSS Float
مرجع HTML DOM: خاصية cssFloat