سرخط خبرها

خاصیت clear و خاصیت float در css

خاصیت clear و خاصیت float در css

در این قسمت از آموزش css  ، خاصیت Clear و خاصیت float را توضیح می دهیم. شما با صفات float و clear می توانید عناصر خود را نظم بخشید و کنار هم قرار دهید .

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

یکی از مشکلاتی که در css اغلب اوقات اتفاق می افتد کنار هم قرار دادن عناصر در صفحه است . صفت float این امکان را به ما می دهد که عناصر را در کنار یکدیگر قرار دهیم و همچنین می توانیم به کمک صفت clear آن را در عین این که کنار هم قرار گرقته اند از حالت شناوری در آوریم . 

خاصیت float :

صفت float این امکان را به ما می دهد که عناصر را در کنار یکدیگر به صورت شناور نگه داریم . یکی از موارد مهم در طراحی سایت، کنار هم قرار دادن عناصر در صفحه وب است. Property ی float در CSS این امکان را به طراح وب می دهد تا بتواند عناصر html را در کنار هم قرار دهد. یکی از خواص مهم در CSS  ، خاصیت Float است. وقتی به یک المان در کد خود float به سمت چپ  یا راست میدهید ، المان مورد نظر به آن سمت خاص میرود و بقیه المان هایی که بعد از تگ مذکور آمده اند و  float ندارند به سمت مخالف رانده میشوند و اطراف المان مورد نظر را فرا می گیرند.  

درک مفهوم شناورسازی (float) در ابتدا کمی مشکل به نظر می رسد

با استفاده از خاصیت float می توان موقعیت یک عنصر را به سمت چپ یا راست تنظیم کرد.خاصیت float از مهمترین ویژگی ها در Css و همچنین طراحی سایت می باشد.

این خاصیت وقتی عمل می کند که به عنصر مورد نظر خاصیت موردنظر خود را بدهید.

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

 مقادیر خاصیت float:

right عنصر در سمت راست عنصر دیگر قرار می گیرد .  با استفاده از این مقدار عنصر رو سمت راست قرار میدید 

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

 none : عناصر به همان ترتیبی که در طراحی و کدنویسی صفحه تعیین شده است ، در کنار هم قرار می گیرند .  با استفاده از این مقدار شما خاصیت  float رو خنثی می کنید .

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

نکته : چنانچه فضای کافی در عرض صفحه برای قرار گرفتن دو عنصر یا بیشتر در کنار هم وجود نداشته باشد ، عنصر به خط بعدی انتقال می یابد .

 

چگونه عناصر شناور می شوند ؟

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

مثال زیر کاربرد خاصیت Float را نشان می دهد.

.text
{

float:left;
width:110px;
height:90px;
margin:5px;

}

اگر یک تصویر را به سمت راست شناور کنیم ، متن بعد از آن در اطراف آن ، به سمت چپ جریان می یابد :

img
{
float:right;
}

 

مثال: به div1 مقدار right رو دادیم و به div2 مقدار float رو دادیم . حالا نتیجه به شکل زیر خواهد بود :

به کد CSS زیر دقت کنید :

کد html این ساختار :

به div1 مقدار right رو دادیم و به div2 مقدار float رو دادیم . حالا نتیجه به شکل زیر خواهد بود :

  خاصیت float در css

 

شما میتونید به هر تعداد که میخواین ستون کنار هم قرار بدید . فقط دو نکته بوجود میاد .

 

نکته اول و اصلی ترین نکته

هنگامی که شما از خاصیت float برای عناصر موجود در صفحه استفاده می کنید ، برای اینکه عناصر بعدی به درستی سر جای خودشون قرار بگیرن و به درستی نمایش داده شوند باید از خاصیت clear در عنصر بعدی استفاده کنید تا خاصیت float رو خنثی کنه .

حالا ما میخوایم بعد از این دو ستون یک ستون قرار بدیم . به کد css زیر دقت کنید :

 

div{font: 12px/25px tahoma; width: 100px; height: 150px; color: #000; text-align: center;}

.div1{background-color: red; float: right;}

.div2{background-color: yellow; float: left;}

.div3{width: 100%; background-color: pink;}

کد html ساختار جدید :

 

<div class=”div1″>Div1</div>

<div class=”div2″>Div2</div>

<div class=”div3″>Div3</div>

ما بدون استفاده از clear عنصر بعدی رو قرار دادیم . حالا نتیجه به شکل زیر خواهد بود :

  خاصیت float در css

عنصر سوم ما با مشکل مواجه شد و نتونستیم بعد از این عناصر قرارش بدیم . برای حل این مشکل از خاصیت clear استفاده می کنیم . به کد css جدید زیر دقت کنید :

.div3{width: 100%; background-color: pink; clear: both;}

در اینجا با استفاده از خاصیت clear و مقدار both هر دو مقدار float عناصر قبلی رو خنثی کردیم . حالا نتیجه رو مشاهده کنید :

 خاصیت float در css

با درج clear ما خاصیت float رو خنثی کردیم تا اثرات float در عنصر بعدی تاثیر نگذاره .

خاصیت Clear :

همینطور که مشاهده کردید این خاصیت برای خنثی کردن خاصیت float استفاده میشه

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

فرض کنید که ما یک عکس یا یک پاراگراف داریم و قصد داشته باشیم که هیچ عنصر دیگری کنار این ها قرار نگیرد. با استفاده از property ی clear می توانیم فضای اطراف عنصر را خالی کنیم.

 

 مقادیر خاصیت clear:

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

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

left : در سمت چت هیچ عکس و متنی نمی تواند قرار گیرد.

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

مثال زیر خاصیت Clear را در بخش آموزش css نشان می دهد.

 

img
{
float:left;
}
p.clear
{
clear:both;
}

 

در استفاده از خاصیت float و clear در تگ های html چند نکته است که باید مدنظر داشته باشید :
  • اگر میخواهید المان های دیگر اطراف المان float شده را بگیرند باید بصورت inline باشند یا اگر float دارند باید جهت float آنها با جهت float المان اولیه یکی باشد.
  •  المان هایی که خاصیت float می گیرند، اندازه شان به اندازه محتوای داخلشون بستگی دارد و اگر محتوا کم باشد، المان مورد نظر کوچک میشه . برای رفع این مشکل باید width رو به المانی که float دارد بدهید.
  • اگر در یک المان block چند تا المان float داشته باشید ، المان بلاک جمع میشه و گاهی المان های float از پایین ، از المان parent خود بیرون می زنند. 
  • اگر المانی که بعد ازالمان float شده میاد، خاصیت clear داشته باشد، دیگه اطراف المان فلوت شده را فرا نمی گیرد.
  • المانی که خاصیت clear=both دارد و float نیز شده است، فقط المان هایی را که قبل از خودش آمده است، clear میکند نه المان های بعدی را.
 
QR Code For: خاصیت clear و خاصیت float در css

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.