شرح float في CSS | أساسيات CSS

 

باستخدام سمة float في CSS، يمكنك نقل عنصر إلى اليمين أو اليسار. في هذه الحالة، يتحرك المحتوى الموجود أسفل العنصر (العنصر الذي يتم تطبيق سمة الطفو عليه) لأعلى ويوضع بجوار العنصر المطلوب.


عادة ما يتم تكديس عناصر HTML من أعلى إلى أسفل المتصفح. على سبيل المثال، عنوان في أعلى الصفحة، ثم فقرة أسفله، وما إلى ذلك. ولكن في بعض الأحيان لمزيد من الجمال، يجب وضع بعض العناصر معًا. باستخدام سمة float في CSS، يمكنك نقل عنصر إلى اليمين أو اليسار.

 تعد صفة الطفو مثالية للمواقف التي نريد وضع النصوص فيها بجوار الصور (مثل صور الصحف).

يتم استخدام السمة clear للتحكم في سلوك العناصر التي يتم تطبيق Float عليها.


خاصية Float

يمكن أن تحتوي السمة Float على القيم التالية:

 ● left  - يتحرك العنصر المطلوب إلى اليسار وتوجد محتوياته على يمين العنصر
 ● right - يتحرك العنصر المطلوب إلى اليمين ويقع المحتوى السفلي على يسار العنصر
 ● none - يعطل هذا الوضع السمة float للعنصر ويكون العنصر في موقعه الطبيعي

في أبسط أشكال استخدام خاصية float، يمكن استخدامها لوضع الشبكات حول الصور.

يوضح المثال التالي صورة بها عدد عشري بقيمة اليمين والنص على اليسار:


img {
float: right;
margin: 0 0 10px 10px;
}

خاصية clear

يتم استخدام السمة clear للتحكم في سلوك العناصر التي يتم تطبيق Float عليها.

يتم وضع العناصر السفلية للعنصر الذي يتم تطبيق السمة العائمة عليه حول العنصر. لمنع مثل هذا الإجراء، يمكن استخدام الصفة clear.

تحدد السمة clear أي جانب من العنصر يتم تطبيق سمة float عليه، ولا يُسمح بوضع العناصر التالية:

div {
clear: left;
}

إذا كان العنصر أكبر من العنصر الموجود بداخله وتم تطبيق السمة float عليه، فسوف يتجاوز  container الخاصة به. لحل هذه المشكلة، يمكننا استخدام السمة overflow: auto؛ إلى عنصرcontainer:

.clearfix {
overflow: auto;
}

استخدام overflow:auto طالما كنت قادرًا على التحكم في margin و padding  (وإلا قد تتم إضافة شريط التنقل إلى العنصر).


مثال:

.clearfix::after {
content: "";
clear: both;
display: table;
}

تخطيط الموقع مع خاصية Float  

من الشائع جدًا تصميم صفحة ويب باستخدام السمة العائمة:


 

.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%;
}

كلمات مفتاحية: