خصائص CSS المتعلقة بـ Float
تشرح هذه المقالة خصائص CSS المتعلقة بـ Float۔
يمكنك تعلم استخدام بناء الجملة والوظائف لخاصيتي float و clear۔
YouTube Video
HTML للمعاينة
css-float.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-float.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>float</h3>
23 <section style="height: auto; color: black;">
24 <header><h4>float: left</h4></header>
25 <section class="sample-view">
26 <div class="float-left">float left</div>
27 <div class="content">
28 <p>
29 paragraph 1-1
30 paragraph 1-2
31 </p>
32 <p>paragraph 2</p>
33 </div>
34 <div class="clearfix"></div>
35 </section>
36 </section>
37 </article>
38 </main>
39</body>
40</html>خصائص CSS المتعلقة بـ Float
خاصيتا float و clear
1.float-left {
2 float: left;
3 width: 150px;
4 margin-right: 20px;
5 background-color: lightblue;
6}
7
8.content {
9 width: 300px;
10 height: 100px;
11}
12
13.content p {
14 background-color: lightblue;
15 margin: 10px;
16}
17
18.clearfix {
19 clear: both;
20 display: none;
21}float هي واحدة من خصائص CSS التي تُستخدم لجعل العنصر يطفو إلى اليسار أو اليمين داخل عنصره الأصلي، مما يسمح للعناصر الأخرى بالتفاف حوله.۔ تُستخدم خاصية float غالبًا لوضع الصور أو العناصر الصندوقية حول النص، ولكن استخدامها انخفض مع ظهور أساليب التنسيق الحديثة مثل flex و grid.۔
- في فئة
float-left، يتم تعيين خاصيةfloatإلىleft.۔ يطفو العنصر المطبق إلى الجانب الأيسر من عنصره الأساسي، ويلتف العنصر التالي إلى الجانب الأيمن.۔ - في فئة
clearfix، يتم تعيين خاصيةclearإلىboth.۔ يمنع استخدام هذه الفئة العنصر التالي من الالتفاف حول العنصر العائم.۔ هنا، نمنع العنصر التالي من التعويم بعد الصورة للحفاظ على التنسيق.۔
كيفية استخدام خاصية float
القيم
left: تجعل العنصر يطفو إلى اليسار، مما يسمح للعناصر الأخرى بالالتفاف إلى اليمين.۔right: تجعل العنصر يطفو إلى اليمين، مما يسمح للعناصر الأخرى بالالتفاف إلى اليسار.۔none: هذه هي القيمة الافتراضية ولا تجعل العنصر يطفو.۔inherit: ترث قيمة خاصيةfloatمن العنصر الأصلي.۔
خاصية clear
- عند استخدام خاصية
float، قد يلتف العنصر التالي حول العنصر العائم.۔ لمنع ذلك، يتم استخدام خاصيةclear.۔ يمكن أن تحتوي خاصيةclearعلى القيم التالية:۔left: يتجنب العناصر التي تطفو إلى اليسار.۔right: يتجنب العناصر التي يتم تعويمها إلى اليمين۔both: يتجنب العناصر التي يتم تعويمها إلى اليسار واليمين۔none: يسمح للعناصر بالطفو بحرية۔ هذه هي القيمة الافتراضية۔
ملاحظات
- عند استخدام
float، قد تكون هناك مشكلة حيث يتجاهل ارتفاع العنصر الرئيسي ارتفاع العنصر المعوم۔ لتجنب ذلك، استخدم تقنيةclearfixأو خاصيةoverflow: hidden;على العنصر الرئيسي۔ - في التصميم المتجاوب أو التخطيطات المعقدة، قد يكون
floatأكثر صعوبة في التعامل مقارنة بـflexأوgrid، لذا يوصى باستخدامflexأوgrid۔
الملخص
float هي تقنية قديمة لتعويم العناصر إلى اليسار أو اليمين، مما يسمح بتفاف النصوص أو العناصر الأخرى، ولا تزال تُستخدم أحيانًا للتخطيطات البسيطة أو لتفاف الصور۔ ومع ذلك، لإنشاء تخطيطات أكثر مرونة وأسهل، يوصى باستخدام flexbox أو grid۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔