آموزش استفاده از صفت Floating در CSS

با استفاده از صفت های Floating نحوه قرار گیری عناصر را در صفحه در کنار یکدیگر

مشخص می کنیم .دو صفت در این قسمت توضیح داده می شود . 1 : Float . 2 .Clear

برای شناور کردن اجسام در کنار هم از صفحه Float استفاده می کنیم . روش کار این

صفت به این صورت می باشد که فرض کنید در بالای صفحه شما یک لوگو همراه با یک

کادر جستجو دارید و می خواهید هر دو یکی در راست و دیگری در سمت چپ قرار بگیرند .

CSS به طور پیش فرض یکی را پس از دیگری و در خط بعد قرار میدهد برای اینکه کادر جستجو

در کنار لوگو ما در قسمت چپ قرار بگیرد ازصفت Float استفاده می کنیم .

صفت Float دارای 3 ویژگی Right – Left و None می باشد.

Right : عناصر را به سمت راست شناور می کند .

Left : عناصر را به سمت چپ شناور می کند .

none : تصویر و متن در جایی که متن وجود دارد قرار می گیرد .

ویژگیRight

با توجه به توضیحات بالا می خواهم تصویر را در سمت راست متن قرار بدهم.

ویژگیLeft

با استفاده از ویژگیLeft می توانید تصاویر و متن را در سمت چپ قرار دهید.

صفتClear

با استفاده از صفتClear اطراف یک عنصر را در جایی که دیگر عناصر شناور مجاز نیستند

تعیین می کند . در صورتیکه از صفتClear استفاده کنیم صفتFloat غیر فعال می شود.

در دو طرف عناصر ، برخی عناصر ديگر همانند عکس يا متن می توانند قرار بگيرند . توسط

اين خاصيت ، کناره هايي از عنصر را که می خواهيم متن يا عکس در آن سمت قرار نگيرد

را مشخص می کنيم ، که حالت های ممکن زير را می تواند داشته باشد.

در واقع از اين خاصيت برای خالی کردن فضای اطراف يک عنصر استفاده می شود.

– right : هيچ متن يا عکسی نمی تواند در سمت راست عنصر قرار بگيرد.

– left : هيچ متن يا عکسی نمی تواند در سمت چپ عنصر قرار بگيرد.

– both : هيچ متن يا عکسی نمی تواند در دو طرف عنصر قرار بگيرد.

– none : در دو طرف عنصر مجاز است که عکس يا متن قرار بگيرد ، که حالت پيش فرض است.

در استفاده از خاصیتfloat وclear در تگ هایhtml چند نکته است که باید مدنظر داشته باشید:

اگر میخواهید المان های دیگر اطراف المانfloat شده را بگیرند باید بصورتinline باشند یا اگرfloat

دارند باید جهتfloat آنها با جهتfloat المان اولیه یکی باشد.

المان هایی که خاصیتfloat می گیرند، اندازه شان به اندازه محتوای داخلشون بستگی دارد و

اگر محتوا کم باشد، المان مورد نظر کوچک میشه . برای رفع این مشکل بایدwidth رو به المانی

کهfloat دارد بدهید.اگر در یک المانblock چند تا المانfloat داشته باشید ، المان بلاک جمع میشه

و گاهی المان هایfloat از پایین ، از المانparent خود بیرون می زنند.

اگر المانی که بعد ازالمانfloat شده میاد، خاصیتclear داشته باشد، دیگه اطراف المان فلوت شده

را فرا نمی گیرد.المانی که خاصیتclear=both دارد وfloat نیز شده است، فقط المان هایی را که قبل

از خودش آمده است، clear میکند . نه المان های بعدی را

منبع :آسا رایانه