تفافت float با display:inline در css
سلام دوستان
من هر چی سرچ میکنم تفافت بین این ها رو نمیفهمم واقعا
درست تعریف این خاصیت ها متفات و float برای تعیین جهت چینش و display برای تعیین طرز قرار گیری عناصر کنار هم استفاده میشه اما جایی که ما میخوایم عناصر block رو تو یه خط قرار بدیم و در حقیقت این خاصیت block رو به inline تغییر بدیم هم float:left جوابگو هست هم display:inline فقط تفافت هایی که من فهمیدم float فاصله ای بین عناصر قرار نمیده ولی dispay:inline به صورت پیش فرض یک فاصله ای روبین عناصر که پشت سر هم قرار میده میزاره...
جفتش داره یه کار رو انجام میده ولی همه میگن تفافت های اساسی بینشون هست و اصلا کاملا با هم متفافت هستند من واقعا درک نمیکنم چرا اخه...
یه تفافت float با display شاید این باشه که توسط مرورگرهای قدیمی پشتیبانی بهتری میشه دیگه تفافتی نداره واقعا!!!
مفهوم اینا یا تعریف شون شاید متفافت باشه که float به معنی شناور کردن عناصر از یک سمت و display:inline برای قرار دادن عناصر تو یک خط مثلا هستش ولی جفتشون دارم مارو به هدفمون میرسونه که میخوایم عناصر بلاک مثل تگ پاراگراف کنار هم قرار بگیرند...
3 پاسخ
مرسی دوست عزیز
ولی وقتی میخوایم عناصر را کنار هم بچینیم به نظر من تفافتی نمیکنه که از کدوم استفاده کنیم جفتشون ما رو به هدفمون میرسونه فارق از تفافت هایی که تو باطن خودشون دارند... درسته؟
سلام به itpro یی عزیز
خب در باطن این دو با هم تفاوت های زیادی دارند مفهوم اصلیه فلوت اینه که المان ها رو برای چسبیدن المان بعدی بهشون اماده می کنه (برای همین در پایان فلوت ها ما از Clear fix استفاده می کنیم.) اما در Display inline در حقیقت عرض المان به اندازه ی فضایی که لاظم داره در میاد.
فک می کنم با توضیحات بالا مشخص باشه که Float برای چیدن المان ها استفاده میشه.
البته روش های نوینی در حال روی کار آمدن هستن .(مثل Flex bos و ...)
خیر همونطور که parsasi گفتن اصولا کاربرد متفاوتی دارن. شاید برای مثال ساده شما این تفاوت حس نشه بنابراین دلیل نمیشه بگیم یک کار انجام میدن. float در لغت به معنای شناوری هست و وقتی در css این کلمه کلیدی استفاده میشه یعنی این عنصر به چه نحوی در صفحه وب شناور (جایدهی) بشه مثلا وقتی مقدار float برابر right هست یعنی باید این عنصر صفحه بره به منتها الیه سمت راست شناور بشه و بالعکس اگه left باشه (که به طور پیش فرض left هست همیشه)، به منتها الیه سمت چپ میچسبه.
و اما display در معنای لغوی یعنی نمایش. و وقتی در css از این خاصیت استفاده می کنیم یعنی نحوه نمایش عنصر رو مشخص می کنیم. مثلا وقتی مقدار none میگیره یعنی اصلا عنصر رو نمایش نده توی صفحه وب. و یا وقتی میگیم inline (که باز به طور پیش فرض مقدار Display برای تمامی عناصر inline در نظر گرفته میشه غیر از تگ p که برای نمایش پاراگراف هست)، منظور اینه که نمایش عنصر در همان خط یا سطر فعلی صفحه وب باشه.
علت اینکه در مثال شما هیچ تفاوتی حس نکردید اینه که شما به هر دو این خواص مقدار پیش فرض رو اعمال کردید.