آشنایی با CSS Float

CSS float چیست ؟ CSS float یا شناوری این امکان را به یک عنصر می دهد تا شناور شود و به سمت چپ یا راست حرکت کند


امیر سروری ۱۲ دیدگاه CSS , اصول طراحی وب سایت پنج شنبه, ۲۹ام اردیبهشت , ۱۳۹۰ 22044 بازدید

CSS float چیست ؟

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

برای توضیح مناسب این خصوصیت به مثال زیر توجه کنید

چیست css float

یک تصویر بدون خاصیت CSS float در بین متن قرار گرفته است

<p><img src="images/example.jpg" alt="" />
example text example text example text example text
example text example text example text example text
example text example text example text example text
example text</p>

چیست css float

یک تصویر همراه با خاصیت CSS float در بین متن قرار گرفته است

<p><img style="float:left" src="images/example1.jpg" alt="" />
example text example text example text example text example
text example text example text  example text example text
example text example text example text example text example
text example text example text example text example text 
<img style="float:right" src="images/example1.jpg" alt="" />
example text example text example text example text
example text example text example text example text
example text example text example text example text
example text </p>

با توجه به شکل بالا متوجه خواهید شد که تصاویر با استفاده از خصوصیت CSS float (float:left , float:right ) درون متن شناور شده اند و متن این عناصر را احاطه کرده است. اجزاء دارای خصوصیت CSS float بر روی اجزاء و عناصر کناری خود نیز تاثیر گزار خواهند بود . به طوری که در مثال بالا ملاحظه می نمائید متن در کنار تصاویر بعد از اضافه شدن خصوصیت CSS float به سمت مخالف جهت float حرکت کرده و همچنین تصویر را احاطه می کنند.
به این نکته توجه داشته باشید که خصوصیت CSS float تفاوتهای با خصوصیت position absolute دارد . یک عنصر با خصوصیت position absolute از جریان چینش صفحه جدا خواهد شد . در صورتی که در خاصیت CSS float عنصر از جریان صفحه پیروی خواهد کرد و با توجه به چینش و وضعیت اطراف خود تغییر موقعیت خواهد داد .

یک عنصر چگونه به وسیله CSS float شناور می شود

با استفاده از خصوصیت float میتوانید اکثر اجزاء را در یک چینش وب سایت شناور کنید . مقدار این خصوصیت میتواند ( left , right , both , none , Inherit ) باشد.
همه عناصر به صورت پیش فرض دارای خصوصیت float:none هستند . خصوصیت Inherit مشخص کننده این است که این عنصر از عنصر بالادستی خود پیروی خواهد کرد ( parent element )

.sideBar { float:left }

عناصر دارای خصوصیت float از قوانین و شرایط خاصی پیروی خواهند کرد که در زیر به چند مورد اشاره خواهد شد .

  • عناصر فقط در جهت افقی شناور خواهند شد . یه این معنا که عناصر فقط به سمت چپ و راست ( left , right ) شناور می شوند و حرکتی به سمت بالا و پایین نخواهند داشت .
  • عناصر تا جایی به سمت چپ یا راست حرکت می کنند که اجازه و فضای حرکت داشته باشند
  • عناصر بعد از یک عنصر با خصوصیت float تغییر حالت خواهند داد
  • عناصر قبل از یک عنصر با خصوصیت float تغییر حالت نخواهند داد
  • یک عنصر با خصوصیت float به اندازه محتوای داخل عنصر تغییر اندازه خواهد داد . این در صورتی است که به صورت پیش فرض اندازه ای برای این عنصر در نظر نگرفته شده باشد

در چه زمانی از خاصیت CSS float استفاده میکنیم ؟

CSS float کاربرد های بسیار زیادی در چینش ساختار صفحات وب سایت دارد . از ساده ترین چینش ( شناور شدن تصویر در متن در مثال بالا ) تا چینش ساختار صفحات . درک این خصوصیت و عکس العمل های اجزاء بعد از استفاده از این خصوصیت در طراحی و چینش صفحات وب نقش بسیار بزرگی را خواهد داشت . مرورگرهای متفاوت در مواردی خاص عکس العملهای متفاوتی در برابر استفاده از این خصوصیت دارند ( به طور مشخص IE ) و تشخیص و رفع این تفاوت ها می تواند یک امتیاز در طراحی وب سایت شما باشد و کمک کند وب سایت در تمامی مرورگرها به درستی نمایش داده شود .

چیست css float

چینش صفحات با استفاده از CSS float

چیست css float

Css float میتواند یک ابزار مناسب در محتوا و عناصر کوچک نیز باشد

در خود آموزهای بعدی مطالب و مثال های بیشتری از نحوه استفاده از این تکنیک را تشریح خواهیم کرد

مطالب مرتبط

آشنایی با Display , Visibility در CSS
گزینشگرهای تو در تو , گزینشگرهای گروهی در CSS
آشنایی با مفهوم Margin , Padding , Border در CSS
افزایش سرعت , کاهش مصرف پهنای باند – CSS Sprite
نمایش یکسان وب سایت در مرورگرهای متفاوت – CSS Reset
اندازه فونت متغیر و ثابت


نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۱۲ دیدگاه برای این نوشته ثبت شده است


  1. مسعود
    ۲۹ اردیبهشت ۱۳۹۰

    سلام؛عالی بود آقا امیر، ممنون




  2. بهترین طراحی
    ۱۲ خرداد ۱۳۹۰

    مطلب مناسب و ایده بردار خوبی برای برنامه های بعدا بود .
    من یه سوال دارم . ما در زبون فارسی داریم فایل ها و قالب رو به نمایش میذاریم .
    : مثال content در میان و دو sidebar در دو سمت راست و چپ بشادر در نظر بگیر .
    خوب حالا ما بایذ تمام قالب بندی رو از سمت راست تصویر جای گذاری کنیم یا نه از بار اونطرف .
    یا نه . یکی از ساید بار ها رو راست و دیگری رو چپ و میان قالب رو به یکی از این دو تا بچسبونیم .
    میدونم سخت نوشتم ولی یه توضیح ساده بدین .
    من در این سوال به بهینه سازی هم نکته میدم .




    • امیر سروری
      ۱۲ خرداد ۱۳۹۰

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




  3. سینا
    ۱۲ خرداد ۱۳۹۰

    با سلام و تشکر از شما
    امکان داره مطالبی که برای آموزش طراحی وب و مخصوصا css میذارید رو در انتهای پست به صورت pdf در اختیار قرار بدین؟ اینجوری استفاده از این مطالب ارزشمند رو راحت تر کرده و میشه به صورت یک منبع جامع این مطالب رو نگهداری و در آینده استفاده کرد




  4. saeid
    ۲۷ آبان ۱۳۹۰

    mamnun babate in matlab. faghat kash manbayi ro k azash tarjome mikardid ham zekr mikardi.




  5. مجتبی
    ۱۲ مرداد ۱۳۹۱

    سلام و ممنون ار مطلبتون!
    یه سوال داشتم:
    من سی اس اس رو بلدم ولی توی همین چینش ساختار صفحه که بخش اصلی هست مشکل دارم.
    یعنی برای چینش صفحه (هدر، فوتر، کانتنت، سایدبارها و …) میایم تگ دایو (بدون در نظر گرفتن ساختار صفحه و همینطوری پشت سر هم! نه با چینش خاص مثلا تگ دابو هدر اول بعد تگ دایو سایدبار راست و …) تعریف می کنیم (که تعداد و نحوه چینش اونها هم به اسلایس تصویر و سلیقه طراح بستگی داره دیگه؟!) و بعد با استفاده از دستورات position و float میایم چینش رو درستن می کنیم؟
    درست یا دستورات دیگه ای هم لازم هست؟
    لطفا اگر امکانس هسیت کلا یه مطلب رو به همین موضوع اختصاص بدید.
    بازم ممنون




  6. علی نژاد
    ۲۷ اسفند ۱۳۹۱

    مطلب بالا خیلی قشنگ بود. اگه من بخوام از سه ستون استفاده کنم یعنی side left side right content اون وقت باید چجوری بنویسم کدش رو.
    معمولی نوشتنی side چپ میره پایین تر از اونیکی ها وایمیسته مجبور میشم با ماریجین تاپ منفی بدم بکشمش بالا




  7. محمد کرمانی
    ۹ بهمن ۱۳۹۲

    سلام
    float مقدار both ندارد، شما به اشتباه نوشتید:
    مقدار این خصوصیت میتواند ( left , right , both , none , Inherit ) باشد.




  8. ساجده
    ۲۳ اسفند ۱۳۹۳

    سلام خسته نباشید.من یه قالب دو ستونه نوشتم و حالا ازش خسته شدم و میخوام بخش پست ها رو دو ستونه بکنم، همه ی کاراش رسیده منتها بین پست هایی که متنشون کم و زیاده جای خالی وجود داره، چیکار کنم که بتونم پست ها رو به سمت بالا بکشونمش و فیکس پست بالاییشون بکنم؟؟؟ میتونید کمکم کنید؟؟؟ برای دو ستونه کردن پستها بهشون دستور float دادم




  9. اکبر اسماعیلی زاده
    ۷ شهریور ۱۳۹۵

    متشکر از این مطلب ارزشمندتون .



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2019 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.