صفت Floating
با استفاده از صفت های Floating نحوه قرار گیری عناصر را در صفحه در کنار یکدیگر مشخص می کنیم .
دو صفت در این قسمت توضیح داده می شود . 1 : Float . 2 .Clear
برای شناور کردن اجسام در کنار هم از صفحه Float استفاده می کنیم . روش کار این صفت به این صورت می باشد که فرض کنید در بالای صفحه شما یک لوگو همراه با یک کادر جستجو دارید و می خواهید هر دو یکی در راست و دیگری در سمت چپ قرار بگیرند .
CSS به طور پیش فرض یکی را پس از دیگری و در خط بعد قرار میدهد برای اینکه کادر جستجو در کنار لوگو ما در قسمت چپ قرار بگیرد ازصفت Float استفاده می کنیم .
صفت Float دارای 3 ویژگی Right - Left و None می باشد.
Right : عناصر را به سمت راست شناور می کند .
Left : عناصر را به سمت چپ شناور می کند .
none : تصویر و متن در جایی که متن وجود دارد قرار می گیرد .
ویژگی Right
با توجه به توضیحات بالا می خواهم تصویر را در سمت راست متن قرار بدهم .
{
float : right ;
با استفاده از ویژگی Left می توانید تصاویر و متن را در سمت چپ قرار دهید .
{
float : left ;
با استفاده از صفت Clear اطراف یک عنصر را در جایی که دیگر عناصر شناور مجاز نیستند تعیین می کند . در صورتیکه از صفت Clear استفاده کنیم صفت Float غیر فعال می شود .
در دو طرف عناصر ، برخی عناصر ديگر همانند عکس يا متن می توانند قرار بگيرند . توسط اين خاصيت ، کناره هايي از عنصر را که می خواهيم متن يا عکس در آن سمت قرار نگيرد را مشخص می کنيم ، که حالت های ممکن زير را می تواند داشته باشد .
در واقع از اين خاصيت برای خالی کردن فضای اطراف يک عنصر استفاده می شود .
- right : هيچ متن يا عکسی نمی تواند در سمت راست عنصر قرار بگيرد .
- left : هيچ متن يا عکسی نمی تواند در سمت چپ عنصر قرار بگيرد .
- both : هيچ متن يا عکسی نمی تواند در دو طرف عنصر قرار بگيرد .
- none : در دو طرف عنصر مجاز است که عکس يا متن قرار بگيرد ، که حالت پيش فرض است .
-
اگر میخواهید المان های دیگر اطراف المان float شده را بگیرند باید بصورت inline باشند یا اگر float دارند باید جهت float آنها با جهت float المان اولیه یکی باشد.
-
المان هایی که خاصیت float می گیرند، اندازه شان به اندازه محتوای داخلشون بستگی دارد و اگر محتوا کم باشد، المان مورد نظر کوچک میشه . برای رفع این مشکل باید width رو به المانی که float دارد بدهید.
-
اگر در یک المان block چند تا المان float داشته باشید ، المان بلاک جمع میشه و گاهی المان های float از پایین ، از المان parent خود بیرون می زنند.
-
اگر المانی که بعد ازالمان float شده میاد، خاصیت clear داشته باشد، دیگه اطراف المان فلوت شده را فرا نمی گیرد.
-
المانی که خاصیت clear=both دارد و float نیز شده است، فقط المان هایی را که قبل از خودش آمده است، clear میکند . نه المان های بعدی را .منبع
این قسمت از نوشته های حسین شرفی می باشد.
آموزش CSS - مشخص کردن عرض و ارتفاع جدول در CSS