طرح‌بندی CSS - شناور و پاکسازی

طرح‌بندی CSS - شناور و پاکسازی

CSS float این خاصیت مشخص می‌کند که عناصر چگونه شناور شوند.

CSS clear این خاصیت مشخص می‌کند که کدام عناصر می‌توانند در کنار عناصر پاکسازی شده شناور شوند و در کدام سمت.

خصیت float

float این خاصیت برای قرار دادن و فرمت‌دهی محتوا استفاده می‌شود، به عنوان مثال، برای اینکه تصویر به سمت چپ شناور شود تا به متن در داخل قالب برسد.

float این خاصیت می‌تواند یکی از ارزش‌های زیر را تنظیم کند:

  • left - عناصر به سمت چپ قالب خود شناور می‌شوند
  • right - عناصر در سمت راست قالب خود شناور می‌شوند
  • none - عناصر شناور نمی‌شوند (در مکانی که متن تازه ظاهر شده است نمایش داده می‌شوند). ارزش پیش‌فرض.
  • inherit - عناصر از ارزش float پدر خود را ارث می‌برند

ساده‌ترین استفاده از آن این است که،float این خاصیت می‌تواند (در روزنامه‌ها) به اطراف تصویر نوشته شود.

مثال - float: right;

در این مثال مشخص شده است که تصویر باید به سمت راست شناور شود:

انگور ساحلی

آموزش‌های پیشرو در فناوری وب - رایگان. در CodeW3C.com، می‌توانید تمام آموزش‌های مورد نیاز خود برای ساخت وب‌سایت را پیدا کنید. از HTML پایه تا CSS، و حتی پیشرفته‌های XML، SQL، JS، PHP.

دستورالعمل‌های ما شامل همه جوانب فناوری وب است. این شامل استانداردهای W3C مانند HTML، CSS، XML است. و همچنین فناوری‌های دیگری مانند JavaScript، PHP، SQL و غیره.

در CodeW3C.com، ما هزاران مثال ارائه می‌دهیم. با استفاده از ویرایشگر آنلاین ما، می‌توانید این مثال‌ها را ویرایش کنید و کد را آزمایش کنید.

مثال

img {
  float: right;
}

آموزش شخصی

مثال - float: left;

در این مثال مشخص شده است که تصویر باید در متن قرار گیردبه سمت چپ浮动：

انگور ساحلی

آموزش‌های پیشرو در فناوری وب - رایگان. در CodeW3C.com، می‌توانید تمام آموزش‌های مورد نیاز خود برای ساخت وب‌سایت را پیدا کنید. از HTML پایه تا CSS، و حتی پیشرفته‌های XML، SQL، JS، PHP.

دستورالعمل‌های ما شامل همه جوانب فناوری وب است. این شامل استانداردهای W3C مانند HTML، CSS، XML است. و همچنین فناوری‌های دیگری مانند JavaScript، PHP، SQL و غیره.

در CodeW3C.com، ما هزاران مثال ارائه می‌دهیم. با استفاده از ویرایشگر آنلاین ما، می‌توانید این مثال‌ها را ویرایش کنید و کد را آزمایش کنید.

مثال

img {
  float: left;
}

آموزش شخصی

مثال - بدون float

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

انگور ساحلی آموزش‌های پیشرو در فناوری وب - رایگان. در CodeW3C.com، می‌توانید تمام آموزش‌های مورد نیاز خود برای ساخت وب‌سایت را پیدا کنید. از HTML پایه تا CSS، و حتی پیشرفته‌های XML، SQL، JS، PHP. دستورالعمل‌های ما شامل همه جوانب فناوری وب است. این شامل استانداردهای W3C مانند HTML، CSS، XML است. و همچنین فناوری‌های دیگری مانند JavaScript، PHP، SQL و غیره. در CodeW3C.com، ما هزاران مثال ارائه می‌دهیم. با استفاده از ویرایشگر آنلاین ما، می‌توانید این مثال‌ها را ویرایش کنید و کد را آزمایش کنید.

مثال

img {
  float: none;
}

آموزش شخصی

خواندن بیشتر

کتاب خارجی:شناور CSS