خاصیت float, clear و display در CSS و تعریف عناصر inline وblock
سلام دوست عزیز
در css یک خاصیت وجود دارد به نام direction که دارای دو مقدار rtl و ltr است. شما به راحتی می توانید چینش یک متن یا هر چیزی را راست چین و یا چپ‌چین کنید.
کافی است بنویسید
direction: rtl;
الی آخر…
اما در مورد عکس‌ها، روشی که امروزه رایج است، این است که آن را به صورت شناور در می آورند. خاصیت float در CSS دارای سه مقدار right و left و none است (center نداریم)
float:left;
وقتی یک عنصر را به سمت راست float می کنیم اتفاقات زیر می افتد (با دقت فراوان بخوانید):
۱ – آن عنصر به سمت راست حرکت می کند
۲ – عناصر بلوکی اطراف، آن را نادیده می گیرند. انگار که وجود ندارد.
برای این که عناصر بلوکی، عنصر float را نادیده نگیرند، کافی است که خاصیت clear را برای آن عناصر بلوکی با یکی از دو مقدار right یا left و یا both تنظیم کنیم. (انتخاب آن هم با توجه به نوع float می باشد. both یعنی هم چپ و هم راست)
——–
در این جا لازم می دانم که عناصر بلوکی را برای شما توضیح دهم.
در HTML تگ ها را می توان به دو دسته تقسیم کرد: عناصر بلوکی (block level) و عناصر خطی (inline)
عناصر خطی، عناصری هستند که در می توانند در وسط یک سطر قرار گیرند و فقط به اندازه ی جای خود، فضا اشغال می کنند.. مانند تگ <a> که یک لینک ایجاد می کند و می تواند در وسط یک متن قرار گیرد. و همچنین تگ های em و strong و …
عناصر بلوکی، عناصری هستند که یک سطر کامل را اسغال می کنند و در حالت عادی نمی توانند در میان یک خط قرار گیرند. همواره باید یک خط کامل را اشغال کنند. (مانند تگ های div و img و p و …)
———
دوباره لازم به ذکر است که عناصر بلوکی و یا inline را می توان به صورت های دیگر هم نشان داد.
مثلا می توان یک عنصر inline را به صورت block نشان داد و همچنین می توان یک عنصر block را به صورت inline نشان داد.
و توجه کنید که اگر یک عنصر inline را به صورت block نشان دهیم (و برعکس) تغییری در رفتار float و clear ایجاد نمی شود. float و clear با ماهیت اصلی عنصر سر و کار دارند.
inline بودن و block بودن یک عنصر در css توسط خاصیت display قابل تغییر است.
خاصیت display دارای مقادیر inline و block و none و … است. none یعنی که آن عنصر کلا نمایش داده نشود و جایی را هم اشغال نکند.
