لطفا کوریسنا

شناور چیست | همه چیز در مورد قدرت شناور CSS Float - همه چیزهایی که نیاز دارید

تمام عناصری که در صفحه HTML ظاهر می شوند چیزی بیش از عناصر مستقیم نیستند. من عمدتا دو نوع دارم:

  1. بلوک هایی که تمام عرض را اشغال می کنند قرار دارند و در بالا و پایین آنها تقویت می شوند. به عنوان مثال، تگ های DIV، P، H.
  2. vbudovani (داخلی). به عنوان مثال، SPAN، STRONG، EM، A و IMG.

جدول.

نقش محتوا پس از انتقال از طرح جدول به طرح div رشد کرد. این با این واقعیت توضیح داده می شود که float به مرورگر وب اجازه می دهد تا ستون ها را بدون رفتن به جدول اضافه کند. می توانید معنی آن را بفهمید درست, ترک کرد، اما نه مرکز.

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

نقش شناور پس از انتقال از طرح جدول به طرح div رشد کرد. این با این واقعیت توضیح داده می شود که float به مرورگر وب اجازه می دهد تا ستون ها را بدون رفتن به جدول اضافه کند. می توانید معنی آن را بفهمید درست, ترک کرد، اما نه مرکز.

برای نمایش قدرت اضافی: بلوک. یا نمایش: درون خطی; ما می توانیم یک نوع ارتوکتان را به دیگری تبدیل کنیم. به عنوان مثال، لیست UL، که شامل یک سری بلوک های LI است، می تواند به صورت افقی گسترش یابد:

  • PARAGRAPH
  • PARAGRAPH
  • PARAGRAPH
  • PARAGRAPH
  • PARAGRAPH
  • PARAGRAPH

با قدرت باطل شناور، برش مستقیم بلوکی است، اما با یک ویژگی مشخص: عرض آن به کل فضا گسترش نمی یابد. به عنوان مثال، عنوان h3 به شکل زیر است:

ce HEADER h3

اگر قدرت نمایش را به آن بدهید: inline;، متوجه می‌شویم که نه تنها عرض، بلکه موقعیت بالا و پایین عنصر نیز تغییر کرده است:

ce HEADER h3

اگر بخواهم یک عنصر سمت راست قرار دهم، text-align:right; سپس رد می کنیم:

ce HEADER h3

و کاملاً متفاوت است، به عنوان شناور: درست است; برای بازگرداندن احترام، ایستادن در بالا و پایین عنصر غیر قابل تغییر شده است:

ce HEADER h3

چگونه باید با عناصری که از عنوان به دست می آیند برخورد کنیم؟

متن بالا دیگر دائمی نیست و عنصر شناور را نمی توان به هر ترتیبی جایگزین کرد.

ce HEADER h3

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


A B C D تعداد عناصر شناور برای اطمینان از ثبات قرارگیری آنها است.

آبکه درجیمتن...


و تأیید در امتداد لبه پایینی این حروف که در یک طرف یافت می شوند انجام می شود.


A B C D همانطور که می رویم، به طوری که بسته بندی عنصر به لحظه مناسب متصل شود (zvіdsi)، مقامات راکد هستند، اخبار واضح است. Yogo mi momomo به تگ خالی اضافه کنید


برای قرار دادن یکنواخت بلوک بلوک های مستطیل، آنها را به همان عرض تنظیم کنید.


بلوک 1
بلوک 2
بلوک 3
بلوک 4
بین بلوک ها کجا ایستاده اید؟ اگر بپرسید، پس از طریق آنهایی که عناصر شناور فضای کافی ندارند، بوی بد به سمت پایین حرکت می کند.
بلوک 1
بلوک 2
بلوک 3
بلوک 4
تغذیه احتمالاً شامل افزودن DIV دیگری نیز می شود:
بلوک 1
بلوک 2
بلوک 3
بلوک 4

چیدمان جدول بسیار مفید و قابل درک است، آهنگین، بنابراین به عنوان یک آنالوگ از display:table; ظاهر می شود. این فرم با یک کد ویکورستان کوچکتر بیرون می آید.

بلوک 1
بلوک 2
بلوک 3
بلوک 4
، که در آن فاصله مرزی به معنای فضای افقی و عمودی بین مراکز است.

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

متن...

متن...


Posilannya در dzherela:

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

اطلاعات کوتاه

نحو

شناور: چپ | راست | هیچ یک

وقت ملاقات

شرحلب به لب
<тип> نوع ارزش را مشخص می کند.<размер>
A & Bمعانی ممکن است به ترتیب مشخص شده نمایش داده شوند.<размер> && <цвет>
A | بنشان می دهد که شما باید فقط یک مقدار را از انتخاب ها (A یا B) انتخاب کنید.عادی | کلاه های کوچک
الف || بارزش های پوستی را می توان به طور مستقل یا همراه با دیگران به خوبی درمان کرد.عرض || شمردن
معنی گروهی[زراعت || صلیب]
* صفر یا چند بار تکرار کنید.[,<время>]*
+ یک یا چند بار تکرار کنید.<число>+
? به معنای نوع، کلمه چی گروه واجب نیست.درونی؟
(الف، ب)نه کمتر از A، بلکه بیشتر از B بار تکرار کنید.<радиус>{1,4}
# یک یا چند بار از طریق کما تکرار کنید.<время>#

اهمیت

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

جعبه شنی

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

img ( شناور: (( playgroundValue )) ;)

لب به لب

شناور

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

نتیجه این خوانش لب به لب در شکل نشان داده شده است. 1.

برنج. 1. پر کردن شناور

مدل شی

هدف - شی.style.cssFloat

توجه داشته باشید

در مرورگر اینترنت اکسپلورر 6، از مقدار دسترسی چپ یا راست برای عناصر شناور درج شده در عناصر قدیمی اجتناب شده است. زیر آن ورودی که مجاور طرف پدر است. به نظر می رسد مشکل اضافه شدن نمایشگر: درون خطی به عنصر شناور باشد. همچنین، کدام مرورگر اجازه ورودی 3 پیکسلی (به اصطلاح "اشکال سه پیکسلی") را می دهد که مستقیماً توسط مقادیر شناور مشخص می شود.

مشخصات

مشخصات پوست چندین مرحله التهاب را طی می کند.

  • توصیه - مشخصات توسط W3C تحسین شده و به عنوان یک استاندارد توصیه می شود.
  • توصیه نامزد ( توصیه احتمالی) - گروهی که استاندارد را رعایت می کند، از رسیدن به اهداف خود راضی است، اما نیاز به کمک اضافی از متخصصان درگیر در اجرای استاندارد دارد.
  • توصیه پیشنهادی توصیه شده است) - در این مرحله سند برای بررسی توسط کمیته مشورتی W3C برای تایید باقی مانده ارائه می شود.
  • پیش نویس کاری - نسخه بالغ تر پیش نویس پس از بحث و بررسی و اصلاحات برای اطمینان از کامل بودن انجام شد.
  • پیش نویس سردبیر ( Chernetka سردبیر) – نسخه سیاه استاندارد پس از اصلاحات توسط ویراستاران پروژه انجام شد.
  • پیش نویس ( مشخصات Chernivets) – اولین نسخه مشکی استاندارد.

مرورگر

مرورگر

جدول مرورگر دارای مقادیر زیر است.

شرح

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

نحو

شناور: چپ | راست | هیچکدام | به ارث می برند

اهمیت

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

HTML5 CSS 2.1 IE 9 Cr 15 Op 11 Sa 5 Fx 8

شناور

Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Duis autom dolor in hendrerit in vulputate velit esse molestie consequat، vel illum dolore eu feugiat null facilisis at vero eros et accumsan et iusto dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feu.

نتیجه این خوانش لب به لب در شکل نشان داده شده است. 1.

برنج. 1. پر کردن شناور

مدل شی

document.getElementById("elementID").style.styleFloat

document.getElementById("elementID").style.cssFloat

مرورگر

در مرورگر اینترنت اکسپلورر 6، از مقدار دسترسی چپ یا راست برای عناصر شناور درج شده در عناصر قدیمی اجتناب شده است. زیر آن ورودی که مجاور طرف پدر است. به نظر می رسد مشکل اضافه شدن نمایشگر: درون خطی به عنصر شناور باشد. همچنین، برخی از مرورگرها به یک padding 3px (به اصطلاح "اشکال سه پیکسلی") اجازه می دهند که مستقیماً توسط مقادیر شناور مشخص شود.

اینترنت اکسپلورر تا نسخه 7.0 از مقدار ارثی پشتیبانی نمی کند.

قالب بندی جداول آبشاری). این زبان از سال 1996 وجود داشته است و تا به امروز به پیشرفت خود ادامه می دهد. در حال حاضر، vikorists در حال کار بر روی نسخه سوم CSS هستند. با کمک برنامه نویسی CSS، می توانید یک وب سایت کاملا زیبا و کاربرپسند ایجاد کنید که برای یک توسعه دهنده قدیمی و غیرقابل دسترس به نظر نمی رسد و بدون گیر کردن در جاوا اسکریپت. قابلیت های فعلی نسخه سوم به آن اجازه کار می دهد.

خرده فروشان همچنین می توانند از گزینه های قالب بندی دستی مانند Flexbox یا Position برای تغییر مکان یک عنصر در سایت استفاده کنند، اما همه چیز مرتب است. برای Cob، از پستی و بلندی های Float عبور کنید.

CSS Float – چه چیزی نیاز دارید؟

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

برنامه های طرح بندی خاص ممکن است گاهی اوقات تصاویر را علامت گذاری نکنند، اما در بالای آنها قرار می گیرند. بسیاری از کلمات مشابه در طراحی وب یافت می شوند، فقط به این دلیل که متن، به جای رفتن روی تصویر، در کنار آن یا زیر آن نمایش داده می شود (اگر قدرت Float به درستی تنظیم نشده باشد)، یا در غیر این صورت، همانطور که لازم است وجود ندارد.

توضیحات شناور CSS

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

قدرت شناور معانی مختلفی دارد:

  • شناور: ارث بردن;
  • شناور: سمت راست;
  • شناور به سمت چپ؛
  • شناور: هیچ

برای کسانی که انگلیسی می دانند، مقادیر پارامترهای ویسکوزیته Float ممکن است معقول باشد. برای کسانی از شما که نمی‌دانید، می‌توانیم توضیحی ارائه کنیم. پارامتر :ترک کرد؛بدن عنصر را به سمت چپ ترین گوشه عنصر پدر می برد. همان (فقط در کادر دیگر) با پارامتر bcgjkmpjdfybb نمایش داده می شود :درست؛. اهمیت : به ارث می برند؛عنصر را مجازات می کند تا همان آموزش را از باتکوفسکی بگیرد. به چنین عناصری عناصر فرزند نیز گفته می شود، زیرا آنها مستقیماً در وسط سرزمین پدری در کد HTML ظاهر می شوند. و قدرت :هیچ یک؛به عنصر اجازه می دهد تا جریان اصلی سند را مختل نکند، در پشت تمام قسمت های کد نصب می شود.

Float چگونه کار می کند؟

قدرت Float CSS دستیابی به آن را آسان می کند. هر آنچه در بالا توضیح داده شد را می توان بدون توجه خاص انجام داد. سپس همه چیز بسیار ساده خواهد بود. Ale first nizh همچنان به اعمال Float ادامه می دهد، فقط کمی از تئوری. عنصر پوستی سایت یک بلوک است. با باز کردن کنسول در گوگل کروم و فشردن کلیدهای Ctrl+Shift+J می‌توانید به این سمت بروید. متن، عنوان، تصویر، پیام و سایر سایت‌های انبار در بلوک‌ها، فقط در اندازه‌های مختلف نمایش داده می‌شوند. از این به بعد، تمام بلوک ها یکی پس از دیگری خواهند رفت. همانطور که در مثال زیر می بینید، ردیف های کد یکی پس از دیگری قرار می گیرند، بنابراین آنها به شدت یکی پس از دیگری ظاهر می شوند.

به این جریان طبیعی می گویند. در نتیجه، تمام بلوک ها یکی روی دیگری (بدون جابجایی بدنه عناصر) به صورت عمودی قرار می گیرند. از این به بعد، همه چیز به جای وب سایت به همین ترتیب مجدداً برقرار می شود. با این حال، به عنوان مثال، vikorista، قدرت CSS Float Left، عنصر موقعیت طبیعی خود را در کناره از دست می دهد و به سمت چپ منتهی می شود. چنین رفتاری ناگزیر منجر به از بین رفتن عناصری می شود که در جریان عادی از بین رفته اند.

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

پاک کردن عملکرد برای اکثر مشکلات

تابع Float یک دوست قلبی دارد - Clear. در عین حال بوی تعفن عملکردهای متخلف یکی یکی تکمیل می شود و توزیع کننده را خوشحال می کند. در نتیجه، عناصر شناور جریان عادی خود را ترک می کنند و شروع به شناور می کنند، مانند عنصری که قدرت Float به آن راکد شده است (مثلاً CSS Float Top). در نتیجه، به جای یک عنصر شناور، دو عنصر بیرون می آیند، و اصلاً در جایی که قصد دارند توزیع کننده را گسترش دهند. از این لحظه همه مشکلات شروع می شود.

تابع Clear پنج مقدار دارد:

  • :ترک کرد؛
  • :درست؛
  • :هر دو؛
  • : به ارث می برند؛
  • هیچ یک؛

اگر از تابع Clear استفاده کنید، می توانید قیاس را درک کنید. چگونه یک ردیف املا در کد داشته باشیم؟ شناور: سمت راست;(کد CSS در معرض تغییر است)، سپس عملکرد مقصر است روشن: درست;. در مورد قدرت هم همینطور است شناور به سمت چپ؛اطلاعات بیشتری در مورد Yogo اضافه کنید پاک کردن: چپ;. هنگام نوشتن کد روشن: هر دوخواهید دید که عنصری که این تابع به آن متراکم شده است از عناصری که تابع Float به آن متراکم شده است کمتر خواهد بود. تنظیمات را از عنصر پدر به ارث ببرید و هیچ کدام تغییرات لازم را در ساختار سایت ایجاد نمی کنند. هنگامی که نحوه عملکرد توابع Float و Clear را درک کردید، می توانید کدهای شناور HTML و CSS منحصر به فرد و منحصر به فرد بنویسید که وب سایت شما را یکنواخت می کند.

شناور Vikoristanny برای ستون ها

قدرت Float به ویژه هنگام ایجاد ستون در یک وب سایت (یا قرار دادن محتوای CSS Float در مرکز یک صفحه وب) مفید است. این کد به خودی خود کاربردی ترین و ساده ترین است، بنابراین می توانید به تعداد گزینه های ایجاد یک قالب وب سایت مشابه که از دو ستون تشکیل شده است نگاه کنید. برای مثال، بیایید یک وب‌سایت استاندارد با محتوا، نوار ناوبری سمت راست، سرصفحه و پاورقی را در نظر بگیریم. کد به این صورت خواهد بود:

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

سپس کد به #content و #navigation می رود. برای این عناصر از تابع Float استفاده می شود. #محتوا چپ دست است و #ناوبری راست دست است. این برای ایجاد یک سایت با دو ستون ضروری است. لازم است عرض را مشخص کنید تا اجسام با یکدیگر همپوشانی نداشته باشند. عرض را می توان در صدها مشخص کرد. بنابراین ساده تر است و پیکسل کمتری دارد. مثلاً 45 درصد برای #محتوا و 45 درصد برای #ناوبری و 10 درصد برای دادن حاشیه قدرت تصمیم بگیرید.

قدرت Clear که در #پاورقی است، به پاورقی عنوان #ناوبری و #محتوا نمی دهد، بلکه آن را در همان مکانی قرار می دهد که در آن قرار داشته است. چه اتفاقی می تواند بیفتد؟ چرا Power Clear را نشان نمی دهید؟ برای این کد، #footer فقط به سمت سربالایی می رود و به زیر #navigation ختم می شود. این بدان معناست که #ناوبری فضای کافی برای قرار دادن یک عنصر دیگر است. در این صورت به وضوح قابل مشاهده است که چگونه قدرت Clear و Float مکمل یکدیگر هستند.

مشکلاتی که ممکن است هنگام نوشتن کد با آنها مواجه شوید

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

عناصر گلدانی

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

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

با این حال، مشکل بسته شدن عناصر صفحه وب را می توان به روش دیگری حل کرد. دو روش متداول دیگر وجود دارد:

  • موقعیت عملکرد vikoristannya;
  • فلکس باکس.

تابع Position گاهی اوقات جایگزین خوبی برای CSS Float است. در مرکز صفحه وب، Position بهترین راه برای گسترش تصویر است. اگر معانی: مطلق و نسبی به درستی تعریف شوند، عناصر در جای خود قرار می گیرند و روی یکدیگر همپوشانی ندارند.

تجزیه و تحلیل کد برای توابع موقعیت و شناور

درباره نحوه جایگزینی Float با Position در کدهای HTML و CSS بیشتر بخوانید. در واقع، بسیار ساده است. استفاده از عناصر #container و #div قابل قبول است.

در این نرم افزار می توانید از تابع (CSS Div) Float در کانتینری دیگر استفاده کنید تا به شما کمک کند یک سایت استاندارد از دو ستون ایجاد کنید. هرگز تابع Clear را فراموش نکنید. بدون آن، هیچ پوششی از عناصر یک به یک وجود نخواهد داشت.

بنابراین، چگونه می توانم کدهای CSS و Float را برای ویکوریزه کردن Postion تغییر دهم؟ خیلی ساده:

موقعیت:نسبی;

موقعیت:نسبی;

زمانی که #container و #div باید بخشی از عنصر پدر شوند. گولوونه؟ #div و #container را در یک عنصر قدیمی که با اندازه آنها مطابقت دارد قرار دهید.

Flexbox – چه عملکردی می تواند به جایگزینی CSS Float کمک کند؟

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

Flexbox به معنای قدرت نیست، اما اجازه دهید آن را یک ماژول بنامیم. بنابراین، فلکس باکس تمام توان کم را تشویق می کند که فقط افراد با آن کار می کنند. علاوه بر این، عملکرد نمایش که دارای سه پارامتر inline، block و inline-block در فلکس باکس است، تنها یک جریان فلکس را از دست می دهد.

Flexbox چگونه کار می کند؟

این فناوری به خرده فروش کمک می کند تا به راحتی عناصر را به صورت افقی و عمودی تراز کند. Flexbox همچنین می تواند مستقیماً ترتیب نمایش عناصر را تغییر دهد. این فناوری دارای دو محور است: محور اصلی و محور Cross که شامل کل Flexbox می شود. این را می توان با استفاده از توابع Float و Clear نیز انجام داد. ما سیستم خود را به صورت کد خواهیم داشت که در آن فقط قدرت ما قادر به کپی کردن عناصر قدرت دیگر مانند Float و Position نخواهد بود. و این امر حتی رایج تر خواهد بود و حتی همانطور که قبلاً گفته شد Flexbox فقط در نسخه های جدید مرورگرها کار می کند.

به یاد داشته باشید که می توانید از Position، Flexbox و Float برای ایجاد یک طراحی منحصر به فرد و اصلی برای وب سایت خود استفاده کنید. هر یک از گزینه های بررسی شده در آمار به روش خود عمل می کند و این هم مزایا و هم معایبی دارد. علاوه بر این، اتفاق می افتد که در اینجا تابع Float مناسب است (مثلاً برای یک سایت با ساختار ساده) و در اینجا بهتر است از Position یا Flexbox استفاده کنید.

اشکال دو حاشیه

با این حال، گاهی اوقات، متأسفانه، برخی از مرورگرها با مشکلاتی مواجه می شوند که مربوط به کد نوشته شده نیست، بلکه به اشکالات ظاهری مرورگر مربوط می شود. به عنوان مثال، یک باگ در اینترنت اکسپلورر وجود دارد که به آن Double Margin Bug می‌گویند. شما باید پارامتر Margin را در دو ضرب کنید، که منجر به گنجاندن عناصر سایت در سراسر مرزهای مرورگر می شود. برای منحصر به فرد بودن کافی است پارامتر Margin را در صفحات وارد کنید. این اشکال تنها در صورتی رخ می دهد که از مقادیر توان Margin و Float اجتناب شود.

margin-left:10px;

این کد عنصر را در اینترنت اکسپلورر 20 پیکسل سمت چپ قرار می دهد. می توانید کد را به صورت زیر تغییر دهید:

حاشیه چپ: 10%;

یا همینطور،

margin-right:10px;

هر دو گزینه از مشکل جابجایی عنصر ناشی می شوند.

اشکالات مرورگر و نمایش نادرست سایت

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