عنصر شناور CSS

خاصیت عنصر شناور CSS برای موقعیت یابی عناصر در سمت چپ یا راست ظروف آن ها است. متفاوت از ویژگی موقعیت ، عنصر شناور به عنوان بخشی از جریان صفحه باقی می ماند.

ساخت عنصر شناور CSS

عناصر دارای خاصیت شناور CSS بر طرح سایر عناصر تأثیر می گذارند. محتوای متن و تصاویر ، عناصر شناور را احاطه کرده است.

در مثال ، شناور CSS را مشاهده می کنید:

.float-box {
    float: left;
    width: 200px;
    height: 100px;
    margin: 20px;
    border: 5px solid black; 
}  
	
.other-box {
   clear: left;
}

اگر داخل یک ظرف چندین عنصر HTML دارید ، باید نحوه شناور بودن آنها را تعیین کنید.

از ویژگی float CSS برای بسته بندی متن در اطراف تصاویر استفاده می شود. با این حال ، می تواند برای سایر عناصر نیز مورد استفاده قرار گیرد.

چهار ویژگی ممکن برای ویژگی float CSS وجود دارد:

• سمت چپ: عناصر در سمت چپ شناور هستند.
• right: عناصر در سمت راست شناور هستند.
• هیچ: عناصر شناور نیستند.
• inline-start: عناصر در سمت شروع بلوک حاوی شناور قرار دارند.
• inline-end: عناصر در سمت انتهای بلوک حاوی شناور هستند.

مثال زیر باعث ایجاد تصاویر شناور CSS در سمت چپ متن می شود.

img {
   float: left;
}

مثال زیر یک تصویر را در سمت راست متن شناور می کند.

img {
   float: right;
}

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

img {
   float: none;
}

شناور تقلیدی: مرکز

هیچ خاصیتی به نام CSS float: center وجود ندارد. با این حال ، می توانید از ترکیبی از خواص استفاده کنید تا به نتیجه ای مشابه برسید.

یک گزینه استفاده از صفحه نمایش: انعطاف پذیر و توجیه کننده محتوا: مرکز:

.example1 {
  width: 100%;
  height: 100%;
  border: 2px solid #cc3f85;
  display: flex;
  justify-content: center;
}

.example2 {
  width: 50%;
  border: 2px solid #66d9ef;
}

کنترل سرریز

اگر عنصر شناور بلندتر از عنصر حاوی آن باشد ، سپس عنصر شناور از ظرف خود خارج می شود. می توانید این مشکل را با خاصیت سرریز برطرف کنید. با یک مقدار خودکار ، ظرف را به اندازه کافی بزرگ برای عنصر شناور کش می دهد.

در مثال ، ما با استفاده از روش overflow: auto مشکل سرریز را برطرف می کنیم:

بدون سرریز: خودکار

.clearfix {
    overflow: auto;
}

توجه: خاصیت سرریز به طور خاص برای پاکسازی شناورها طراحی نشده است. با دقت از آن استفاده کنید تا از نتایج ناخواسته جلوگیری کنید.

روش زیر بر سرریز ترجیح داده می شود: روش خودکار برای حل این مشکل. بعد از عنصر والد محتوای پنهان اضافه می کند (شناور را پاک می کند).

اکثر وب سایت های مدرن از این استراتژی استفاده می کنند:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

نکات مهم عنصر شناور CSS:

• اگر عناصر دارای نمایشگر باشند ویژگی CSS شناور کار نمی کند: هیچ.
• اگر ویژگی float مقدار ارثی داشته باشد ، عنصر مقدار float را از والد خود دریافت می کند.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.