العناصر العائمة Floats في CSS

تعويم نص حول صورة

من أبسط استعمالات خاصية float تعويم نص حول صورة، كما هو موضح بالمثال التالي:

ملف HTML

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed
  cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis
  ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia
  arcu eget nulla.</p>

  <img src="http://lorempixel.com/200/100/" />

  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque
  nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin
  ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.</p>

ملف CSS:

  img {
      float:left;
      margin-right:1rem;
  }

النتيجة:

اطّلع على تجربة حية لهذا المثال على Codepen.

الرابط العجيب بين الخاصية clear والخاصية float

ترتبط خاصية clear ارتباطًا وثيقًا خاصية float، وتستخدم لمنع تعويم العناصر على جانب معين من الحاوية، ويمكن أن تأخذ القيم التالية:

القيمة	الوصف
none	تسمح بتعويم العناصر على الجانبين.
left	تمنع تعويم العناصر على الجانب الأيسر من الحاوية.
right	تمنع تعويم العناصر على الجانب الأيمن من الحاوية.
both	تمنع تعويم العناصر على الجانبين.
initial	تسترجع القيمة الابتدائية لخاصية float.
inherit	تُوَرِّث قيمة خاصية float من العنصر الأب للإبن.

مثال

<html>
    <head>
        <style>
            img {
                float: left;
            }
            p.clear {
                clear: both;
            }
        </style>
    </head>
    <body>
        <img src="https://static.pexels.com/photos/69372/pexels-photo-69372-medium.jpeg" width="100">
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem
        ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
        <p class="clear">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
        Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
    </body>
</html>

مفهوم Clearfix

مفهوم clearfix هو مفهوم آخر مرتبط خاصية float، والأمثلة التالية توضح كيفية استخدامه:

استخدام Clearfix مع هوامش متداخلة

.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

استخدام Clearfix لمنع تداخل الهوامش العلوية

cf:before,
.cf:after {
    content: " "; /* انظر الملاحظة رقم 1 */
    display: table; /* انظر الملاحظة رقم 2 */
}
.cf:after {
    clear: both;
}

ملاحظات:

1- إضافة حرف الفراغ للعناصر الزائفة after: وbefore: يمنع ظهور فراغات حول العنصر.

2- يجب استعمال table بدلاً عن block في حال استخدام before: لاحتواء هوامش العنصر الابن.

استخدام Clearfix في المتصفحات القديمة مثل IE6 و IE7

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
    *zoom: 1;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
    *zoom: 1;
}

اطَّلع على تجربة حيَّة لاستخدامات clearfix على codepen.

مصادر أخرى: كل ما تريد ان تعرفه عن clearfix.

تحويل حاوية div إلى حاوية سطرية (inline) باستخدام خاصية float

عنصر div هو عنصر كُتَلي، أي أنه يأخذ كل عرض الشاشة، وتوضع العناصر الإخوة له رأسيًا فوق بعضها البعض.

مثال

<div>
    <p>This is DIV 1</p>
</div>
<div>
    <p>This is DIV 2</p>
</div>

ويكون ناتج الشيفرة أعلاه

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

مثال

ملف HTML:

  <div class="outer-div">
      <div class="inner-div1">
          <p>This is DIV 1</p>
      </div>
      <div class="inner-div2">
          <p>This is DIV 2</p>
      </div>
  </div>

ملف CSS:

  .inner-div1 {
      width: 50%;
      margin-right:0px;
      float:left;
      background : #337ab7;
      padding:50px 0px;
  }

  .inner-div2 {
      width: 50%;
      margin-right:0px;
      float:left;
      background : #dd2c00;
      padding:50px 0px;
  }

  p {
      text-align:center;
  }

النتيجة:

اطّلع على تجربة حيَّة لهذا المثال على Codepen.

إصلاح الطوفان بضبط الطفحان

تحصل مشاكل بين العناصر عندما يطبق الطوفان على عنصر بينها لذا يمكن ضبط خاصية الطفحان overflow إلى القيمة hidden أو auto أو scroll لعنصر محدد لإصلاح تلك المشاكل.

ملاحظة: استخدام القاعدة overflow: scroll سيظهر شريط التمرير بشكل دائم.

إنشاء تخطيط بسيط ذو عمودين بعرض ثابت

المثال أدناه يوضح طريقة إنشاء تخطيط ذو عمودين بعرضين ثابتين باستخدام خاصية float.

ملف HTML

  <div class="wrapper">
      <div class="sidebar">
          <h2>Sidebar</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
      </div>
      <div class="content">
          <h1>Content</h1>
          <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
          Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque
          nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin
          ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
          massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
      </div>
  </div>

ملف CSS:

  .wrapper {
      width: 600px;
      padding: 20px;
      background-color: pink;

      /* انظر الملاحظة 1 */
      overflow:hidden;
  }

  .sidebar {
      width: 150px;
      float: left;
      background-color: blue;
  }

  .content {
      width: 450px;
      float: right;
      background-color: yellow;
  }

ملاحظة: العناصر العائمة (floating elements) ليس لديها ارتفاع محدد، و يُجبر استعمال القاعدة overflow: hidden العنصر الأب على التمدد وأخذ ارتفاع العناصر الأبناء.

إنشاء تخطيط ذو ثلاث أعمدة بعرض ثابت

ملف HTML:

  <div class="wrapper">
      <div class="left-sidebar">
          <h1>Left Sidebar</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>

      <div class="content">
          <h1>Content</h1>
          <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
          Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque
          nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin
          ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
          massa. </p>
      </div>

      <div class="right-sidebar">
          <h1>Right Sidebar</h1>
          <p>Fusce ac turpis quis ligula lacinia aliquet.</p>
      </div>
  </div>

ملف CSS:

  .wrapper {
      width:600px;
      background-color:pink;
      padding:20px;
      overflow:hidden;
  }
  .left-sidebar {
      width:150px;
      background-color:blue;
      float:left;
  }
  .content {
      width:300px;
      background-color:yellow;
      float:left;
  }
  .right-sidebar {
      width:150px;
      background-color:green;
      float:right;
  }

إنشاء تخطيط ذو عمودين بعرض ديناميكي (غير ثابت)

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

ملف HTML:

  <div class="sidebar">
      <h1>Sidebar</h1>
      <img src="http://lorempixel.com/150/200/" />
  </div>

  <div class="content">
      <h1>Content</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed
      cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis
      ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia
      arcu eget nulla. </p>
      <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque
      nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin
      ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
      massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper
      vel, tincidunt sed, euismod in, nibh.</p>
  </div>

ملف CSS:

  .sidebar {
      /* `display:table;` shrink-wraps the column */
      display:table;
      float:left;
      background-color:blue;
  }

      .content {
      /* `overflow:hidden;` prevents `.content` from flowing under `.sidebar` */
      overflow:hidden;
      background-color:yellow;
  }

اطَّلع على تجربة حيَّة لهذا المثال على JSFiddle.

شكل مساحة التعويم

تُحدد الخاصية shape-outside شكل مساحة التعويم، وهي المساحة التي تُحيط بالعنصر المُعَوَّم.

المعامل	الوصف
`none`	تعني أن مساحة التعويم (float area) (المساحة حول العنصر العائم) لا تتأثر.
`basic-shape`	تُحدد شكل مساحة التعويم وتأخذ إحدى القيم ()inset أو ()circle، أو ()ellipse، أو ()polygon.
`shape-box`	تحدد الصندوق الذي سيأخذ الشكل، وتأخذ إحدى القيم margin-box، أو border-box، أو padding-box، أو content-box.
`image`	تُحدد صورة توضع داخل الشكل.

مثال

ملف CSS

  img:nth-of-type(1) {
      shape-outside: circle(80px at 50% 50%);
      float: left;
      width: 200px;
  }

  img:nth-of-type(2) {
      shape-outside: circle(80px at 50% 50%);
      float: right;
      width: 200px;
  }
  p {
      text-align: center;
      line-height: 30px; 
  }

ملف HTML

  <img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
  <img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
  <p>Some paragraph whose text content is required to be wrapped such that it follows the curve of
  the circle on either side. And then there is some filler text just to make the text long enough.
  Lorem Ipsum Dolor Sit Amet....</p>

بما أن شكل النموذج الصندوقي للصورتين هو دائمًا مربع، ففي حال عدم استخدام الخاصية shape-outside لن يطفو النص حول الشكل الدائري للصورة وإنما سيطفو حول النموذج الصندوقي ذو الشكل المربع، كما هو موضح في الصورة أدناه.

ولكن عند استخدام الخاصية shape-outside يُعاد تعريف الشكل الخارجي للعنصر ويصبح دائريًا مما يجعل النص يطفو حول الدائرية التخيلية التي ترسمها هذه الخاصية، كما هو موضح في الصورة التالية:

خاصية شكل الهامش (shape-margin)

تُستخدم الخاصية shape-margin لتعريف شكل الهوامش للعنصر، وتأخذ نفس قيم الخاصية shape-outside.

مثال

ملف CSS

  img:nth-of-type {
      shape-outside: circle(80px at 50% 50%);
      shape-margin: 10px;
      float: left;
      width: 200px;
  }
  img:nth-of-type(2) {
      shape-outside: circle(80px at 50% 50%);
      shape-margin: 10px;
      float: right;
      width: 200px;
  }
  p {
      text-align: center;
      line-height: 30px;
  }

ملف HTML

  <img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
  <img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
  <p>Some paragraph whose text content is required to be wrapped such that it follows the curve of
  the circle on either side. And then there is some filler text just to make the text long enough.
      Lorem Ipsum Dolor Sit Amet....</p>

في هذا المثال أُضيف هامش بعرض 10 بكسلات حول العنصر، وكما هو معروف أن شكل صندوق الهوامش مربع، لذلك يجب استخدام الخاصية shape-margin لإعادة تعريف الشكل وجعله دائريًا.