25- تصميم CSS – تعويم ومحاذاة العناصر (float و clear)

• تعويم العناصر (float):

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

• محاذاة العناصر (clear):

خاصية clear في CSS تُستخدم للتحكم في كيفية محاذاة العناصر بالنسبة للعناصر العائمة التي تسبقها.

خاصية تعويم العناصر (float)

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

قيم خاصية float:

• left: يطفو العنصر إلى يسار الحاوية التي يضمه.
• right: يطفو العنصر إلى يمين الحاوية التي يضمه.
• none (افتراضي): لا يطفو العنصر، بل يظهر في مكانه الطبيعي ضمن النص.
• inherit: يرث العنصر قيمة تعويم العنصر الآب (الذي يضمّه).

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

مثال: float: right;

في هذا المثال، يتم استخدام القيمة right مع خاصية float لتعويم صورة إلى يمين النص المحيط بها. سيظهر النص كما لو كان يتدفق حول الصورة.

img {
  float: right;
}

مثال: float: left;

في هذا المثال، يتم استخدام القيمة left مع خاصية float لتعويم صورة إلى يسار النص المحيط بها. سيظهر النص كما لو كان يتدفق حول الصورة.

img {
  float: left;
}

مثال: float: none;

في هذا المثال، يتم استخدام القيمة none مع خاصية float (وهي القيمة الافتراضية أيضًا). لذلك، ستظهر الصورة في مكانها الطبيعي ضمن النص، ولن تطفو إلى اليسار أو اليمين. سيظهر النص بانتظام وكأن الصورة جزء من سلسلة النص.

img {
  float: none;
}

مثال: تعويم عناصر جنبًا إلى جنب باستخدام float: left

بشكل افتراضي، يتم عرض عناصر div فوق بعضها البعض. ومع ذلك، إذا استخدمنا float: left يمكننا جعل العناصر تطفو جنبًا إلى جنب:

• عادةً، تتصرف عناصر div مثل مربعات مستطيلة تظهر الواحدة فوق الأخرى على الشاشة.
• عن طريق تعيين float: left على عناصر div متعددة، فإننا نحركها إلى يسار مستوياتها الافتراضية، مما يسمح للنص المحيط بالتدفق حولها.
• نتيجة لذلك، يمكن ترتيب عناصر div هذه جنبًا إلى جنب على نفس السطر بدلاً من ظهورها فوق بعضها البعض.

div {
  float: left;
  padding: 15px;
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}

تصميم CSS – محاذاة العناصر (clear) والتنقية باستخدام clearfix (clearfix)

• خاصية محاذاة العناصر (clear):

عند استخدام خاصية float لتعويم عنصر ما، وقد نرغب بأن يظهر العنصر التالي أسفل هذا العنصر العائم مباشرةً (وليس على يمينه أو يساره). حينئذٍ نلجأ إلى استخدام خاصية clear.

خاصية clear تحدد كيفية التعامل مع العنصر الذي يليه مباشرةً عنصرًا عائمًا.

قيم خاصية clear:

• none (افتراضي): لا يتم دفع العنصر إلى أسفل عناصر أخرى تطفو لليسار أو اليمين.
• left: يتم دفع العنصر إلى أسفل العناصر التي تطفو إلى اليسار.
• right: يتم دفع العنصر إلى أسفل العناصر التي تطفو إلى اليمين.
• both: يتم دفع العنصر إلى أسفل العناصر التي تطفو إلى اليسار واليمين معًا.
• inherit: يرث العنصر قيمة محاذاة العناصر من العنصر الآب (الذي يضمّه).

ملاحظة مهمة حول مطابقة الت очистки مع التعويم:

عند محاولة محاذاة العناصر بالنسبة لعناصر عائمة، يجب أن تتطابق قيمة clear مع اتجاه تعويم العنصر السابق. على سبيل المثال، إذا كان العنصر معومًا إلى اليسار، فينبغي استخدام clear: left لمحاذاته. سيستمر العنصر العائم بالطفو، لكن العنصر الذي تمت محاذاته سيظهر أسفله في صفحة الويب.

مثال:

يوضح هذا المثال محاذاة العناصر بالنسبة لتعويم إلى اليسار. أي أن العنصر <div2> سيتم دفعه إلى أسفل العنصر المعوم إلى اليسار <div1>.

div1 {
  float: left;
}

div2 {
  clear: left;
}

حيلة تنقية العناصر العائمة (clearfix hack)

في بعض الحالات، إذا كان العنصر العائم أطول من الحاوية التي يضمه، فقد يظهر “تجاوز” بحيث يمتد المحتوى خارج حدود الحاوية. لحل هذه المشكلة، يمكننا الاستعانة بحيلة تنقية العناصر العائمة (clearfix hack).

.clearfix {
  overflow: auto;
}

فعالية حيلة تنقية العوامل باستخدام overflow: auto

تعمل حيلة overflow: auto لتنقية العناصر العائمة بشكل جيد طالما أنك قادرًا على التحكم في الحواشي والتبطين ( وإلا فقد ترى أشرطة تمرير).

ومع ذلك، فإن حيلة تنقية العناصر العائمة الحديثة والجديدة أكثر أمانًا في الاستخدام، والرمز التالي هو الأكثر استخدامًا في معظم صفحات الويب:

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

تصميم CSS – أمثلة على تعويم العناصر (float)

تستعرض هذه الصفحة أمثلة شائعة على استخدام تعويم العناصر (float).

باستخدام خاصية تعويم العناصر (float)، يصبح من السهل ترتيب مربعات المحتوى جنبًا إلى جنب

* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
  padding: 50px; /* if you want space between the images */
}

ما هي خاصية box-sizing في CSS؟

تُعد خاصية box-sizing في CSS واحدةً من خصائص تصميم الصفحات التي تحدد كيفية حساب العرض والارتفاع الكليين لأي عنصر. وبشكل أساسي، تتحكم هذه الخاصية فيما إذا كان يتم احتساب التبطين (padding) والحواف (border) ضمن أبعاد العنصر أم لا.

عرض صور جنبا إلى جنب باستخدام شبكة من الصناديق (grid of boxes)

.img-container {
  float: left;
  width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */
  padding: 5px; /* if you want space between the images */
}

مربعات بأرتفاعات متساوية

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

هناك حل سريع يتمثل في تحديد ارتفاع ثابت، كما هو موضح في المثال التالي:

..box {
  height: 500px;
}

رغم فعالية تحديد ارتفاع ثابت لإنشاء مربعات متساوية الارتفاع، إلا أنه يفتقر للمرونة.

هذه الطريقة مناسبة فقط إذا كنت متأكدًا بأن المربعات ستحتوي دائمًا على نفس كمية المحتوى. ولكن في العديد من الحالات، يختلف محتوى كل مربع عن الآخر.

على سبيل المثال، إذا جربت تطبيق المثال السابق على هاتف محمول، ستلاحظ أن محتوى المربع الثاني سيعرض خارج حدوده.

هنا تبرز فائدة استخدام CSS Flexbox (من مميزات CSS3)، حيث تتيح خاصية Flexbox تمديد المربعات تلقائيًا لتتساوي مع طول أطول مربع.

استخدام Flexbox لإنشاء مربعات مرنة:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container .box {
  background-color: #f1f1f1;
  width: 50%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div class="box">Box 1 - This is some text to make sure that the content gets really tall. This is some text to make sure that the content gets really tall.</div>
  <div class="box">Box 2 - My height will follow Box 1.</div>
</div>

<p>Try to resize the browser window to see the flexible layout.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

</body>
</html>

قائمة تنقل باستخدام تعويم العناصر (float)

يمكنك أيضًا استخدام خاصية float مع قائمة من النصوص التشعبية (hyperlinks) لإنشاء قائمة تنقل أفقية.

• لتطبيق ذلك، عيّن قيمة float: left على عناصر القائمة <li>، مما سيجعلها تطفو إلى اليسار وتتماشى جنبًا إلى جنب.
• بعد ذلك، أزل خاصية list-style عن القائمة للتخلص من نقاط الترقيم أو الرموز الافتراضية التي تظهر عادةً أمام عناصر القائمة.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: red;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

تصميمات مواقع ويب كاملة باستخدام خاصية float

من الشائع أيضًا استخدام خاصية float لتصميم مواقع ويب كاملة، وذلك من خلال توزيع العناصر الرئيسية (مثل الشريط الجانبي والجزء الرئيسي للمحتوى) باستخدام خاصية 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%;
}

جدول خصائص تعويم العناصر (float) في CSS