مثال هایی از ویژگی float در CSS

با استفاده از ویژگی float، به راحتی می توانیم جعبه های محتوا را کنار هم قرار دهیم:

* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%; /*سه جعبه(از 25 درصد برای چهار و از 50 درصد برای دو ستون استفاده کنید*/

  padding: 50px; /*اگر می خواهید بین تصاویر فاصله یا فضا اضافه کنید*/

}

سوال: box-sizing چیست؟

ما به سادگی می توانیم سه جعبه ی شناور را در کنار هم ایجاد کنیم. اما وقتی که چیزی که باعث افزایش عرض(width) جعبه می شود(مانند padding یا کادرها ،border ها) را اضافه می کنیم، جعبه ی ما می شکند. ویژگی box-sizing به ما امکان می دهد تا padding و border را در عرض ( و ارتفاع) کلی جعبه اضافه کنیم و اطمینان حاصل کنیم که padding در درون جعبه باقی می ماند و دچار شکست نمی شود. 

نکته: در مقاله ی Box Sizing در CSS، بیشتر در مورد ویژگی box-sizing صحبت خواهیم کرد.

.img-container {
  float: left;
  width: 33.33%; /*سه دربردارنده - از 25 درصد برای چهار و از 50 درصد برای دو بخش استفاده کنید*/

  padding: 5px; /*اگر می خواهید بین تصاویر فضا اضافه شود*/
}

جعبه ها با ارتفاع یکسان

در مثال قبل، یاد گرفتیم که چگونه جعبه های شناور(float) را با یک عرض برابر، در کنار هم قرار دهیم. اما، ایجاد جعبه های شناور، با ارتفاع(height) یکسان، کار ساده ای نیست. یک راه حل سریع این است که مانند مثال زیر، از یک ارتفاع ثابت استفاده کنیم:

.box {
  height: 500px;
}

اما این روش، خیلی انعطاف پذیر نیست. اگر بتوانید تضمین کنید که جعبه ها همواره مقدار یکسانی محتوا را در خود نگهداری کنند، خوب است. اما در بیشتر اوقات، محتوای درون جعبه ها یکسان نیستند. اگر مثال بالا را در یک گوشی موبایل باز کنید(یا پنجره ی مرورگر را کوچک کنید) خواهید دید که حتوای جعبه ی دوم در بیرون از این جعبه نشان داده می شوند. اینجا است که Flexbox در CSS3 به کار می آید. زیرا می تواند به طور اتوماتیک جعبه ها را تنظیم کند تا طول آنها برابر با جعبه ی طولانی تر شود:

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

نکته: شما می توانید در این مقاله، در مورد ماژول چینش انعطاف پذیر(Flexbox Layout) اطلاعات بیشتری کسب کنید. 

منوی ناوبری

ما می توانیم با استفاده از float و یک لیست از لینک ها، یک منوی افقی ایجاد کنیم:

<ul>
  <li><a href="#home" class="active">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">تماس با ما</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

مثالی از چینش در وب

این کار نیز متداول است که تمام چینش وب را با استفاده از ویژگی float انجام دهیم:

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.menu {
  width: 25%;
}

.content {
  width: 75%;
}

مثال های بیشتر

یک تصویر به همراه کادر و مارجین، که در ست راست یک پاراگراف شناور(float) می شود.

به یک تصویر امکان می دهیم تا در سمت راست یک پاراگراف شناور شود. همچنین به این تصویر، کادر(border) و مارجین اضافه می کنیم.

یک تصویر به همراه یک کپشن که در سمت راست شناور(float) است.

به یک تصویر با یک کپشن امکان می دهیم که در سمت راست شناور شود.

امکانی فراهم کنیم که حرف اول یک پاراگراف به سمت چپ شناور شود
در این مثال، امکانی فراهم کرده ایم که حرف اول یک پاراگراف در سمت چپ شناور شد و به این حرف استایل اضافه کرده ایم.

ایجاد یک وب سایت با float
با استفاده از ویژگی float، یک صفحه وب ایجاد کنید که منوی ناوری، هدر، فوتر و محتوای سمت چپ و محتوای اصلی داشته باشد.

تمام ویژگی های float در CSS