آموزش ویژگی float در CSS

Ratings
(0)

ویژگی float در CSS، مشخص می کند که یک عنصر، چگونه باید شناور شود. وقتی که از ویژگی float استفاده می کنیم، و می خواهیم عنصر بعدی زیرین(نه در راست و چپ) را مشخص کنیم، باید از ویژگی clear استفاده کنیم. درواقع دستور clear خاصیت شناور بودن را پاک می کند.

ویژگی clear می تواند یکی از مقادیر زیر را داشته باشد:
1. none : عنصر مورد نظر در زیرِ سمتِ چپ، یا سمتِ راستِ عناصر شناور(float) شده، فشار داده نمی شود(قرار نمی گیرد). این پیش فرض است.

2. left : عنصر مورد نظر در زیرِ سمتِ چپِ عناصر شناور(float) شده قرار داده می شود.

3. right : عنصر مورد نظر در زیرِ سمتِ راستِ عناصر شناور(float) شده قرار داده می شود. 

4. both : عنصر مورد نظر در زیرِ هردویِ سمتِ راست و چپِ عناصر شناور(float) شده قرار داده می شود.

5. inherit : عنصر مورد نظر، مقدار clear را از والد خود به ارث می برد.

در ساده ترین حالت، با استفاده از ویژگی float می توانیم متن هایی را به دور تصاویر بسته بندی کنیم.

مثال: float:right

در مثال زیر، یک تصویر داریم که باید در داخل یک متن، به سمت راست شناور(float) شود:

Pineapple مولانا جلال‌الدین محمد بلخی مشهور به مولوی شاعر بزرگ قرن هفتم هجری قمری است. وی در سال ۶۰۴ هجری قمری در بلخ زاده شد. پدر وی بهاءالدین که از علما و صوفیان بزرگ زمان خود بود به سبب رنجشی که بین او و سلطان محمد خوارزمشاه پدید آمده بود از بلخ بیرون آمد و بعد از مدتی سیر و سیاحت به قونیه رفت. مولانا بعد از فوت پدر تحت تعلیمات برهان‌الدین محقق ترمذی قرار گرفت. ملاقات وی با شمس تبریزی در سال ۶۴۲ هجری قمری انقلابی در وی پدید آورد که موجب ترک مسند تدریس و فتوای وی شد و به مراقبت نفس و تذهیب باطن پرداخت.

مثال شماره 1

img {
  float: right;
}
امتحان کنید

مثالی در مورد شناور شدن تصویر در سمت چپ(float: left)

مثال زیر مشخص می کند که یک تصویر باید در سمت چپ یک متن شناور(float) شود:

Pineapple مولانا جلال‌الدین محمد بلخی مشهور به مولوی شاعر بزرگ قرن هفتم هجری قمری است. وی در سال ۶۰۴ هجری قمری در بلخ زاده شد. پدر وی بهاءالدین که از علما و صوفیان بزرگ زمان خود بود به سبب رنجشی که بین او و سلطان محمد خوارزمشاه پدید آمده بود از بلخ بیرون آمد و بعد از مدتی سیر و سیاحت به قونیه رفت. مولانا بعد از فوت پدر تحت تعلیمات برهان‌الدین محقق ترمذی قرار گرفت. ملاقات وی با شمس تبریزی در سال ۶۴۲ هجری قمری انقلابی در وی پدید آورد که موجب ترک مسند تدریس و فتوای وی شد و به مراقبت نفس و تذهیب باطن پرداخت.

مثال شماره 2

img {
  float: left;
}
امتحان کنید

 

یک مثال برای float:none

در مثال زیر، تصویر دقیقاً در جایی که در متن وجود دارد نمایش داده می شود(float: none):

Pineapple مولانا جلال‌الدین محمد بلخی مشهور به مولوی شاعر بزرگ قرن هفتم هجری قمری است. وی در سال ۶۰۴ هجری قمری در بلخ زاده شد. پدر وی بهاءالدین که از علما و صوفیان بزرگ زمان خود بود به سبب رنجشی که بین او و سلطان محمد خوارزمشاه پدید آمده بود از بلخ بیرون آمد و بعد از مدتی سیر و سیاحت به قونیه رفت. مولانا بعد از فوت پدر تحت تعلیمات برهان‌الدین محقق ترمذی قرار گرفت. ملاقات وی با شمس تبریزی در سال ۶۴۲ هجری قمری انقلابی در وی پدید آورد که موجب ترک مسند تدریس و فتوای وی شد و به مراقبت نفس و تذهیب باطن پرداخت.

مثال شماره 3

img {
  float: none;
}
امتحان کنید

مثال: شناور شدن عناصر در کنار یکدیگر

به صورت عادی، عناصر div در بالای یکدیگر نمایش داده می شوند. اما اگر از دستور float:left استفاده کنیم، این عناصر می توانند در کنار یکدیگر شناور شوند:

مثال شماره 1

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

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}
امتحان کنید

 

  • بازدید: 144

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال