Layout - مثالهای Float
مجموعه ای از جعبهها / جعبه هایی با عرض یکسان
با ویژگی float
، چیدن جعبههای محتوا در کنار هم بسیار آسان است:[۱]
Box-sizing چیست؟
به راحتی میتوانید سه جعبه را کنار هم قرار دهید. اما، زمانی که چیزی را به کنترل اضافه میکنید که عرض جعبه را افزایش میدهد (مانند padding یا کادرها) جعبه شکسته میشود. ویژگی box-sizing
به ما اجازه میدهد که padding و کادر را درون عرض کل (و ارتفاع) جعبه داشته باشیم، و ضمانت میکند که padding درون جعبه میماند و جعبه شکسته نمیشود.
نکته: شما میتوانید مطالب بیشتری را دراینباره در فصل Box-sizing در CSS بخوانید.
تصاویر کنار هم
مجموعه ای از جعبهها را میتوان برای نمایش چندین تصویر در کنارهم استفاده کرد:
جعبه هایی با ارتفاع برابر
در مثال قبل، یادگرفتید که چگونه جعبهها را در کنارهم با عرض یکسان قرار دهید. با این حال، ساخت جعبهها با ارتفاع برابر و قراردادن آنها در کنار یک دیگر کار آسانی نیست. اما یک راه حل سریع، تنظیم ارتفاع به صورت fixed است، همانند مثال زیر:
با این حال، این حالت خیلی انعطافپذیر نیست. اگر بتوان ضمانت کرد که جعبهها همیشه مقدار محتوا یکسانی دارند مشکلی نیست. اما در بسیاری از موارد، محتوا یکسان نیست. اگر مثال بالا را در موبایل آزمایش کنید، خواهید دید که محتوای جعبه دوم بیرون از جعبه نمایش داده خواهد شد. در این حالت flextbox در CSS3 به کار میآید - چرا که میتواند بطور خودکار جعبهها را گسترش دهد تا به اندازه بزرگترین جعبه شوند:
مثال
استفاده از Flextbox برای ساخت جعبههای قابل انعطاف:
تنها مشکل موجود با Flexbox این است که در نسخه ۱۰ مرورگر اینترنت اکسپلور و نسخههای قدیمیتر کار نمیکند.

از ویژگی float
با لیستی از ابر لینکها برای ساخت یک منوی افقی استفاده میکند:
مثال چیدمان وب
همچنین انجام چیدمان کل وب با استفاده از ویژگی float
رایج است:
مثال های بیشتر
تصویری با کادر و margin که در سمت راست یک پاراگراف
اجازه دادن به یک تصویر برای قرارگیری در سمت راست دریک پاراگراف. اضافهکردن کادر و حاشیه ها به تصویر.
تصویری با یک زیرنویس (به انگلیسی: caption) که در سمت راست قرار میگیرد
اجازه دادن به یک تصویر با یک زیرنویس که در سمت راست قرار میگیرد.
اجازه دادن به حرف اول یک پاراگراف برای قرارگیری در سمت چپ
اجازه دادن به حرف اول یک پاراگراف برای قرارگیری در سمت چپ و استایل دهی حرف.
استفاده از float برای ساخت یک صفحه خانگی با یک navbar ,header ,footer محتوای سمت چپ و محتوای اصلی.
تمامی ویژگیهای float در CSS
ویژگی | توضیحات |
---|---|
box-sizing | مشخص میکند که چطور عرض و ارتفاع یک عنصر محاسبه میشود: این اندازه ها باید شامل padding و کادرها (borders) باشد یا نه |
clear | مشخص میکند که چه عناصری میتوانند در کنار عناصر cleared و در کدام جهت قرار بگیرند |
float | مشخص میکند که چگونه یک عنصر میبایست float شود |
overflow | مشخص میکند که چه اتفاقی میبایست در صورتی که محتوای یک عنصر از اندازه آن عنصر سرریز داشته باشد رخ دهد |
overflow-x | مشخص میکند که چه کاری میبایست با جهتهای سمت چپ / راست لبه محتوا در صورتی از ناحیه محتوای عنصر سرریز داشته باشد صورت گیرد |
overflow-y | مشخص میکند که چه کاری میبایست با جهتهای سمت بالا / پایین لبه محتوا در صورتی از ناحیه محتوای عنصر سرریز داشته باشد صورت گیرد |
منابع آموزشی