ویژگی float در زبان css و html-[جلسه سوم]

روش های رفع مشکل  float

استفاده از یک عنصر خالی در نگهدارنده 

در این روش از یک عنصر خالی (ترجیحا div) با اعمال ویژگی clear بر روی آن استفاده می شود. کار این  ویژگی این است که اطراف عنصر شناور را پاکسازی کند تا عناصر دیگر به پایین عنصر شناور سقوط کنند. برای بررسی دقیقتر این ویژگی به مطلب مربوط به آن مراجعه کنید.پس کافی است عنصر زیر را به عنوان آخرین فرزند نگهدارنده قرار دهید:

<div style="clear:both;"></div>

یا می توانید از یک کلاس برای این کار استفاده کنید: 

 

<div class="clearfix"></div>

.clearfix {
  clear: both;
}

در نهایت نتیجه بصورت زیر خواهد بود و مشکل برطرف می شود:

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

 استفاده از ویژگی overflow برای نگهدارنده

 کافی است ویژگی overflow را برای عنصر نگهدارنده بر روی مقدار hidden یا auto تنظیم کنید.

.floats-container {
  overflow: hidden;
  /* یا */
  overflow: auto;
}

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

شناور کردن خود عنصر نگهدارنده 

کافی است که به هر سمتی که ترجیح می دهید نگهدارنده را شناور کنید تا ارتفاع فرزندان شناگرش را بگیرد :)

.floats-container {
  float: right;
  /* یا */
  float: left;
}




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

استفاده از شبه عنصر after:

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

.container:after {
  content: "."; 
  visibility: hidden; 
  display: block; 
  height: 0; 
  clear: both;
}

این روش طی چند سال گذشته به گونه های مختلف معرفی و استفاده شده است اما بهترین و معروف ترین آنها را در ادامه معرفی می کنیم:

کافی است که به عنصر نگهدارنده کلاس clearfix بدهید (گاهی در برخی فریم ورک ها از نام کلاس cf برای این کار استفاده می شود که بهتر است با آن نیز آشنا باشید):

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

/**
 * 3
 * IE 6/7 only
 */
.clearfix {
  *zoom: 1;
}

1. تک فاصله ای که برای content در نظر گرفته شده است باعث می شود تا باگی که در مرورگر اپرا در زمان استفاده از ویژگی contenteditable بوجود می آید, از بین برود. 

2. اینکه بجای block از table استفاده شده است به این خاطر است که از before: برای از بین بردن اشکال دیگری استفاده می کنیم. پس اگر before: نباشد می توانید از block استفاده کنید. 3. اگر به فکر پشتیبانی مرورگرهای ie6/7 نیز هستید از خط آخر می توانید استفاده کنید در غیر این صورت نیازی به نوشتن آنها نیست.

 در اینجا before: چه نقشی دارد؟

  در حالت عادی اگر فاصله ای بین عنصر فرزند و نگهدارنده نباشد اگر margin-top برای فرزند در نظر بگیرید به درستی عمل نمی کند و باید بین آنها یک فاصله هر چند یک پیکسلی باشد تا فرزند از عنصر نگهدارنده کنده شود. که می توان آن فاصله را با استفاده از padding-top: 1px برای عنصر نگهدارنده بوجود آورد که روش جالبی نیست. اما می توانید با استفاده از before: و تعیین display از نوع table برای آن به نتیجه مشابه برسید. که این روش هیچ اثر جانبی نخواهد داشت.

در پروژ های امروزه در صفحه آرایی که با float انجام می شود باید به تمام عناصری که نقش نگهدارنده ستون ها را دارند کلاس clearfix بدهید و از کد زیر استفاده کنید:

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

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

 روش استاندارد در آینده یک مقدار به مقادیر ویژگی min-height به نام contain-floats اضافه می شود که کارش رفع مشکل float می باشد. تا آن زمان باید از روش های بالا لذت ببریم :) 

 چند نکته

 ویژگی float با ویژگی های display و position تداخل هایی دارد:

 اگر display برای یک عنصر none باشد, float روی آن عنصر هیچگونه تاثیری نخواهد داشت.  

عناصری که مقدار position آنها absolute یا fixed است نمی توانند شناور شوند و float برای آنها none در نظر گرفته می شود. 

 اگر عنصری ذاتا inline باشد یا display آن inline باشد زمانی که float روی آن اعمال می شود تبدیل به block می شود.  

همینطور عنصری با display از نوع inline-table به حالت table تغییر پیدا می کند.

یک صفحه آرایی ساده با float 

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

پشتیبانی مرورگر ها 

ویژگی float در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, اندروید و iOS پشتیبانی می شود.

---

منبع:https://css-tricks.ir

---

نویسنده: علیرضا برومند     تاریخ:سه شنبه ۱۸تیر۱۳۹۸

---