ویژگی float از آن دسته از ویژگی هایی است که مکان عنصر را مشخص می کند. این ویژگی باعث می شود تا عنصر به سمت چپ یا راست عنصر نگهدارنده اش هول داده شده یا شناور شود.
این ویژگی می تواند مقادیر زیر را داشته باشد:
float: right;
float: left;
float: none; /* مقدار پیشفرض */
float: inherit;
زمانی که یک عنصر به سمت راست هول داده می شود (float: right) محتوای بعد از آن دور لبه چپ عنصر پیچیده می شود. و زمانی که عنصر به سمت چپ هول داده شود (float: left) محتوای بعد از آن دور لبه راست عنصر جمع می شود.
در مثال زیر عنصر تصویر در حالت پیشفرض (none) قرار دارد و متن بصورت عادی بعد از تصویر قرار گرفته است:
با همان شرایط به تصویر ویژگی float با مقدار right را می دهیم:
ویژگی float کارایی بالایی در طراحی صفحات وب دارد. مثلا فرض کنید گالری از تصاویر دارید که هر تصویر یک متن توضیح نیز دارد. html آن بصورت زیر خواهد بود:
<div class="gallery-container">
<figure>
<img src="my-image.png" alt="Alt text">
<figcaption>
image caption
</figcaption>
</figure>
<figure>
<img src="my-image.png" alt="Alt text">
<figcaption>
image caption
</figcaption>
</figure>
<figure>
<img src="my-image.png" alt="Alt text">
<figcaption>
image caption
</figcaption>
</figure>
</div>
چون عنصر <figure> از نوع عناصر بلاک می باشد پس اجازه نمی دهد تا عناصر بعد از آن در کنار آن قرار بگیرند و همچنین این عنصر کل فضای افقی محیط خود را اشغال می کند:
حتی اگر به هر یک از عناصر عرض مشخص بدهیم باز هم اجازه نمی دهند تا عنصر بعدی در کنارش قرار بگیرد:
کافی است تا به این عناصر float داده شود:
figure {
float: left;
margin: 10px;
}
زمانی که یک عنصر بلاک به یک سمت float, یا همان شناور می شود عرض آن عنصر به حداقل ممکن یعنی عرض محتوای داخل آن می رسد.
در مثال بالا بعد از شناور کردن عناصر به سمت چپ, عرض عناصر به اندازه تصویر و متن داخلشان کاهش پیدا کرد.
صفحه آرایی با استفاده از float
قبل از اینکه ویژگی float معرفی شود, طراحان با استفاده از عنصر table و اجزا آن عناصر صفحه را در کنار هم می چیدند یا به اصطلاح صفحه آرایی می کردند. که کار جالبی نبود چرا که عنصر table برای ساخت جدول می باشد نه صفحه آرایی.
در نتیجه با ورود float به دنیای وب جایگزین خوبی برای روش قبلی صفحه آرایی شد. کافی است به عناصر بلاک که نقش نگهدارنده های اصلی صفحه را دارند float داده شود تا بتوانیم ستون های مختلف برای محتوای صفحه را بسازیم.
در واقع ویژگی float نیز برای صفحه آرایی معرفی نشده است بلکه همانطور که اول مطلب گفته شد کار اصلی آن این است که محتوای بعد از آن دور عنصر جمع شود. یعنی همان حالتی که در مجلات و روزنامه ها وجود دارد:
به همین دلیل بعدا مفاهیمی که هدف اصلی آنها صفحه آرایی بود معرفی شدند. مفاهیمی مثل Flexbox و Grid و Multi-Column. اما باید توجه داشته باشید که پشتیبانی مرورگرها در حال حاضر در مورد این روش ها در وضعیت جالبی نیست. اما در آینده نزدیک کاملا قابل استفاده هستند.
نکاتی که باید در مورد رفتار float بدانید
چندین قانون در مورد float وجود دارد که نحوه رفتار این ویژگی را شرح می دهد:
1. زمانی که یک عنصر float می گیرد و به یک سمت شناور می شود, بیرونی ترین لبه عنصر نمی تواند از عنصر نگهدارنده اش خارج شود. (اگر عنصر margin داشته باشد, margin بیرونی ترین لبه محسوب می شود و اگر نباشد بعد از آن border منظور این قانون است)
همانطور که در تصویر بالا مشاهده می کنید عنصر دارای فاصله بیرونی 50 پیکسل از سمت چپ است (margin-left: 50px) اما آن فاصله در زمانی که عنصر به سمت چپ شناور شده است (float: left) همچنان در عنصر نگهدارنده اش حفظ شده و خارج نشده است.
2. وقتی یک عنصر به سمتی شناور می شود باید تا جایی که امکان دارد به سمت منظور هول داده شود. مثلا اگر به سمت چپ شناور می شود باید تا جایی که می تواند به سمت چپ عنصر نگهدارنده اش تغییر مکان دهد.
3. یک عنصر شناور تا جایی به سمت منظور هول داده می شود تا بیرونی ترین لبه آن, لبه عنصر نگدارنده اش یا لبه عنصر شناور دیگری را لمس کند.
4. فاصله بیرونی سمت راست (margin-right) یک عنصری که به سمت چپ شناور شده است در سمت راست فاصله بیرونی سمت چپ یک عنصری که به سمت راست شناور شده است و در سمت راست عنصر نیز است, قرار نمی گیرد. برای سمت چپ هم این قاونون برقرا است. (منظور این قانون عدم تداخل فواصل بیرونی عناصر شناور است)
5. اگر عرض عنصر شناور از فضای موجودی که در اطرافش هست بیشتر شود عنصر به خط بعد سقوط می کند.
6. اگر یک عنصر inline را شناور کنیم مهم نیست که مقدار display آن چه باشد, در هر صورت عنصر به نوع block تبدیل می شود.
(البته به غیر از حالت none)
7. عنصر ریشه (html) نمی تواند شناور شود.
8. عناصری که مقدار position آنها absolute یا fixed است نمی توانند شناور شوند.
9. عنصر شناور از flow صفحه خارج نمی شود, این یعنی حرکت آن بر عناصر همسایه آن تاثیر می گذارد.
10. علاوه بر نکات و قانون های گفته شده دانستن تاثیر عناصر شناور بر رفتار نگهدارنده شان یا همان عنصر پدرشان حائز اهمیت است:
عناصر شناور تاثیری بر روی ارتفاع نگهدارنده شان نمی گذارند.
در حالت عادی عنصر ارتفاع محتوا یا فرزندانش را می گیرد (مگر اینکه ارتفاع (height) خاصی برای آن مشخص شود). اما اگر فرزندان آن شناور (float) باشند, این فرزندان تاثیری بر ارتفاع عنصر پدر نخواهند گذاشت.
از این وحشتناک تر اینکه عنصر شناور روی عناصر بعدی در نگهدارنده های دیگر هم قرار می گیرد و حتی بر روی محتوای آنها تاثیر می گذارد ( متن عنصر دوم به علت وجود عنصر صورتی رنگ که شناور است به جلو حرکت کرده است):
این اتفاق اکثر مواقع دیده نمی شود چون عناصر گاهی حاشیه یا رنگ خاصی ندارند تا طراح متوجه این اتفاق باشد. در نتیجه با مشکلات عجیب و غریب صفحه آرایی روبرو خواهد شد.
برای جلوگیری از این اتفاق باید عملیاتی را انجام دهید که به آن Clearing floats می گویند. چندین روش برای این کار وجود دارد که در ادامه معرفی شده اند و در نهایت بهترین و محبوب ترین روش معرفی می شود:
روش های رفع مشکل 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 استفاده شده است. کد دمو را با دقت بررسی کنید:
See the Pen float layout by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگر ها
ویژگی float در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, اندروید و iOS پشتیبانی می شود.
دمو
دموی زیر از این مطلب گرفته شده است:
دم شما گرم امیدوارم بهترینها نصیب شما بشه
ممنون از شما. همچنین :)
سلام، ممنون از سایت عالی تون … من میخواستم یه نمودار درست کنم … هرچی منابع فارسی گشتم به نتیجه ای نرسیدم، رفتم سراغ یوتیوب و سایتای خارجی، ولی اونجا هم چیزی گیرم نیومد، فقط یه دونه آموزش به درد بخور پیدا کردم که اونم یه کم مبهمه….
اینم لینکشه: http://blog.pu-gh.com/ تو وسطای صفحه آموزش ایجاد یک نمودار دایره ای شکلو میده، میشه خواهش کنم یکم تفسیرش کنین یا یه منبعی چیزی که بتونه کارمو راه بندازه بهم معرفی کنین؟! ممنون
با سلام و عرض ادب جناب سیدی
بابت این اموزش ممنونم…مشکلی در مورد بوتستارپ داشتم امیدوارم بتونید مشکل بنده را حل فرمایید…(هر چند به موضوع بی ربط یاشد، ببخشید)
من میخوام در قالب اول سایت وردپرس تنها عنوان پستها نمایش داده شود و این کار را انجام دادم…حال هنگام کلیک کردن روی تیتر محتوای پست بصورت modal (پاپ آپ) نمایش داده شود….متاسفانه چند روزی هست که واقعا دنبال حل مساله میگردم که چیزی پیدا نکردم.
بوتستارپ را هم از اموزشهای پارس کلیک یاد گرفتم خود خوانده….
امیدوارم بنده را راهنمایی فرمایید.
با تشکر
سلام خدمت شما
اگر مشکلتون در مورد اینه که نمی تونیم محتوای پست رو بزارید توی مدال بهتره از وردپرس بلدها بپرسین که من جزوشون نیستم :)
اگر مشکلتون با ساخت مدال با بوتسرپ بود بگین تا من در اولین فرصت کمکتون کنم
با سلام آقای سیدی
ممنون ولا چند انجمن وردپرس هم برسیدم جوابی نگرفتم…باز ممنون از جواب سریعتون و سایت عالیتون.
با احترام
ممنون از شما. موفق باشید
سلام خسته نباشید.
میخواستم بدونم میشه با فلکس باکس صفحه ارایی کرد مثلا ستون های مختلف قالب سایتو با فلکس باکس طراحی کرد
ممنون به خاطر سایت بینظیرتون
سلام. بله قطعا. ماهیت وجود ماژول فلکس باکس صفحه آرایی هستش.
خیلی ممنون از پاسختون.
یه سوال تخصصی داشتم که ربطی به موضوع نداره
من پسر 17 سالم که که زبان های html , css , javascript , jQuery و تا حدودی php , ruby رو بلدم به نظر شما ارزش ادامه دادن رو داره که این زبان ها رو به طور حرفه ای یاد بگیر و شغل اصلیم رو بر پایه وب قرار بدم؟
ببخشید اگه سوالم بی ربط بود.ممنون میشم جواب بدید
آقا مهدی عزیز یک سوال خیلی سخت رو از یک نفر کم تجربه دارید می پرسید مراقب خودتون باشید :)
من مستقیما نمی تونم جواب بدم چون به خیلی عوامل بستگی داره این موضوع و جواب ثابت نداره ولی یک نکته خیلی کلیشه ای که همه دست کم می گیرننش رو تکرار می کنم
به کاری که داری می کنی علاقه داشته باشی –> توی اون کار بهترین میشی –> وقتی بهترین باشی هم از خودت راضی هستی هم از کارت هم از درآمدت –> در نتیجه از زندگیت راضی هستی.
نکته دیگه این که کنکاش کنید چیزای دیگرو هم تجربه کنید چون از نظر سنی توی شرایط خوبی هستید خداروشکر. شاید راه دیگه ای رو پیدا کردید که خیلی بیشتر علاقه داشتید. در کل منظورم اینه که توی سن تست کردن هستید پس همه چیزو یه کوچولو مزه مزه کنید ولی توی موضوع عمیق نشید. تا علاقتون رو پیدا کنید
و در نهایت دنبال تخصص باشید. کسی که گفت من از وب همه چی می دونم (امنیت, بک اند, فرانت اند و… ) شک نکنید یه جای کارش میلنگه چون امکان عمیق شدن توی همه اینها برای یک نفر خیلی کمه.
طوری باشید که وقتی از در یک جا وارد شدید مثلا بگن مهدی روبی اومد :) منظورم اینه که به یک تخصص بشناسنتون
البته اشتباه برداشت نشه در مورد بقیه چیزا باید آگاهی داشته باشید (ولی نه عمیقا) و خیلی هم کمکتون می کنه.
CSS کاری که php می دونه خیلی بهتر از اونی که نمی دونه کد می زنه. خیلی…
خلاصه:
1. تجربه کنید
2. علاقتون رو پیدا و انتخاب کنید
3. متخصص بشین
خیییییییییییییییییلی ممنون
مطمئنا حرفای شما خیلی کمک میکنه
مجتبی جان،
یه بزرگی میگه: کاری رو انتخاب کنید که بهش علاقه دارید، و از ان روز به بعد در زندگی، حتی یک روز هم کار نخواهید کرد.
درود.
سلام مرسی از توضیحتون ولی من جواب مشکلم پیدا نکردم
الان وقتی بهع قسمت پست و ساید بارم float:right دادم تو صفحه نمایش بزرگ میره و میچسبه به سمت راست سایت و وسط نیست
مشکل کجاست؟؟
سلام. کار float همینه دیگه. که تا جایی که جا داشته باشه عنصر رو هول بده به سمتی که می خواین. شما باید قسمت پست و سایدبارتون رو بزارید توی یک نگهدارنده و اون نگه دارنده رو وسط نگهش دارین. حالا به اون دوتا که داخلشن اگر فلوت بدین این مشکلی که می گین پیش نمیاد
واقعا با این وبسایت حال کردم. منم دنبال حل این مشکل بودم که از توی همین سایت و اینجا راه حلشو پیدا کردم:
http://css-tricks.ir/tutorial/%D9%88%D8%B3%D8%B7-%D9%82%D8%B1%D8%A7%D8%B1-%D8%AF%D8%A7%D8%AF%D9%86-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D8%AF%D8%B1-css/
خیلی از سایتها رو برای این موضوعات میگردم. ولی مثل اینکه برای رفع تکلیف مطلب مینویسن یا هم توان آموزش درست ندارن. اما مثل اینکه این سایت بهترینه و در زمینه سی اس اس واقعا آدم میدونه اینجا حتما به جوابش میرسه
آقا مجتبای سیدی دمت گردم و از اینکه با سایتت آشنا شدم خوشحالم
موفق باشی.
خوشحالم مفید بوده براتون. با آرزوی موفقیت برای شما.
سلام. من یه باکس دارم که شامل متن پست و کامنت ها میشه. وقتی یه دونه دیگه کپی می کنم همشون روی هم بیفته . به هر طریقی که امتحان می کنم. به نتیجه نمیرسم. لطفاراهنماییم کنید خیلی ضروریه
سلام. بصورت تقریبی چیزی که میگین رو توی سایت jsbin.com بسازید. کارتون که تموم شد دکمه ctrl+s رو بزنید و آدرس URL رو همینجا کامنت کنید تا من متوجه بشم قصه چیه.
سلام آقا مجتبی استاد عزیزم !
ممنون از زحماتتون .. هر چه قدر تشکر بکنم کافی نیست واقعا !!!
علاوه بر وب به آدم درس زندگی میدید …
متاسفانه هر کدوم از همکارای شما که در زمینه ی وب فعال هستن به ما تازه کارا با لفظ خوبی برخورد نمیکنن و واقعا بعضی اوقات آدم دل زده میشه از پاسخ های سرد و نا امید کننده توی تاپیک های متفاوت
متشکرم از این همه تواضع و فروتنی شما (این ها رو حرف دل بنده بدونید و از روی تملق و عشوه زبانی بهش نگاه نکنید)
و در آخر استاد عزیز یک سوال داشتم
من کااااملا مبتدی هستم و صفحه آرایی ها رو با float انجام میدم در قالب های دو ستونه طبعا راحت تر ستون ها رو با float و calc کنار هم میچینم همچنین تو قالب های سه ستونه هم باز از تکنیک float استفاده میکنم
به طور کلی میخواستم بدونم این روش منطقی هست اصلا … یا اگه بخوایم علمی بهش نگاه کنیم یه کار پیش پا افتاده و از ریشه غلطی هست ؟؟
و سوال بعدی این که من میخواستم برم سمت فلکس باکس و گرید . اما متاسفانه در مرور گر ها اون بازدهی لازم رو نداره و همیشه وسواس خاصی رو این موضوع دارم که قالبی که مینویسم برای تمام مرور گرها خروجی ایده آلی داشته باشه … با این توضیحات اصن شما استفاده از گرید و فلکس باکس رو منطقی میدونید یا همون سبک قدیمی float پاسخ گوی نیاز ما باشه فعلا بهتره ؟؟
ببخشید سرتون رو درد آوردم ولی تقریبا میتونم بگم مهم ترین سوالای فی الحال منه که مدت هاست دنبال جوابشم با تشکر
سلام ممنونم از پیامتون شما لطف دارین امیدوارم همینطور باشه.
تکنیک float الان امن ترین حالت برای رویه ای که شما دارید هستش. البته من خودم این رویه رو توصیه نمی کنم و اصلا دلیلی نمیبینم که یک سایت باید توی همه مرورگرها یکسان نمایش داده بشه. مرورگرها باید بر اساس توانایی هایی که دارن عمل کنند.
هر تعداد ستونی رو می تونید با همین روش پیاده کنید.
البته میشه از روش float استفاده کرد و با فلکس باکس و گرید کار رو بهبود داد که این بحث رو می تونید توی سایت های خارجی پیدا کنید. ما هم توی دوره فلکس باکس کاملا اینارو پوشش دادیم توی فصل سوم.
براتون آرزوی موفقیت می کنم.
سلام خسته نباشید ممنون از سایت فوق العادتون ببخشید اون قسمتی که float تو صفحه مشکل ایجاد میکنه رو درس متوجه نشدم که از clear استفاده میکنیم (روی عناصر بعدی در نگهدارنده های دیگر هم قرار می گیرد و حتی بر روی محتوای آنها تاثیر می گذارد) چیزی که در مورد clear میدونستم اینه که در اون سمت عنصر که clear داره محتوا قرار نمیگیره حالا تو مثالی که زدید عنصر دوم که تاثیر گرفته از عنصر مجاورش اگه بخوایم بهش clear بدیم مشکل محتوا رو حل میکنه ولی عنصر مجاورش میفته سطر بعدی
سلام ممنونم
توضیح دادن موارد صفحه آرایی بصورت نوشتاری کار سختیه. ویدیو آموزشی نگاه کنید متوجه میشید.
ویدئو لینکاش کجاس
سلام خسته نباشید درمورد incpect و debug کردن فایل های Html و Css مطلب نمیزارید
سلام
زمانی که یک عنصر بلاک به یک سمت float, یا همان شناور می شود عرض آن عنصر به حداقل ممکن یعنی عرض محتوای داخل آن می رسد.
آیا میشه کاری کرد وقتی یه عنصر بلاک به یک سمت شناور میشه عرضش به اندازه فضایی که اطرافش داره کش بیاد نه محتوای داخلش؟
ممنون از زحماتتون
سلام، نه دیگه برای اون کار باید از فلکس استفاده بشه.
سلام خسته نباشید من برای منوی فارسی float:left استفاده چون لازم بود منو سمت چپ باشه و لوگو سمت راست.
اما ترتیب منوی فارسیم برعکس شده . چه کاری میتونم انجام بدم که درست بشه
اینم بگم که htmlرو direction:rtl کردم چون سایت فارسی میخوام
سلام، اینو چک کنید
http://jsbin.com/vetazib/1/edit?html,css,output
سلام و خسته نباشید
سوالم درباره از بین بردن خاصیت غیر منتظره float هست
در داخل یک div که هیچ خصوصیتی بهش ندادم یک img با یه تصویر قرار دادم و خاصیت float:right به تصویر اعمال کردم حالا طبق انتظاری که داریم تصویر از کادر div سر ریز شده
طبق جواب ها یکی از راه حل رفع این مشکل که تصویر درون کادر بیفته اینه که overflow مربود به div رو به auto و یا hidden تبدیل کنیم
در این صورت مشکل حل میشه این درست اما برام گنگ هست که این کد چطوری جلوی این اتفاق رو میگیره؟
مگر کار overflow:hidden این نیست که اگر چیزی سر ریز شد اونو مخفی کنه پس چرا اینجا اونطوری عمل نمیکنه و یا مثلا overflow:auto کارش این بود که اگر از کادر بیرون تر رفت بهش اسکرول بده در حالی که در هر دو حالت غیر این عمل میکنه – ندونستن جواب این سوال ممکنه نتایج غیر منتظره بیشتر ی رو به دنبال داشته باشه
سلام، دلیل این اتفاق Block formatting context هستش که این مقاله این مبحث رو توضیح داده:
https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context
سلام خسته نباشید
http://jsbin.com/qoqobalufo/edit?html,css,output
در کد بالا زیر منو باز نمیشه علتش چیه؟!!!!
سلام، این کد رو چک کنید
https://jsbin.com/zibucis/edit?html,css,output
در کل روش درستی برای ساختن منو نیست، توی اینترنت نمونه کد ببینید تا روش بهتر رو پیدا کنید.
توی کارگاه صفحه آرایی هم ما یک بحثمون ساخت منو هستش.
موفق باشید.
ممنون از راهنماییتون
سلام من یه کد با استفاده از css و html نوشتم اما قابلیت فلوت رو هرچی left یا right میزارم هیچ تغییری نمیکنه ایراد از کجاست؟
کد css
.header{
width: 100%;
height: 210px;
}
.left_header {
width: 70%;
height: 200px;
background:url(../images/logo.png);
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:90% 90%;
background-repeat:no-repeat;
float: left;
}
.right_header {
width: 20%;
height: 200px;
float: right;
}
کد html
11
11
سلام، یا از سایت های codepen.io یا jsbin.com استفاده کنید که من کد رو ببینم یا اینکه از پنل پرسش و پاسخ استفاده کنید تا دوستاتون کمکتون کنن
موفق باشید.
آقا مجتبی با سلام
ممنون از جواب گوییتون
کد رو در codepen.io آپلود کردم
لینکش رو براتون میزارم اینجا
اگر امکانش هست لینک قسمت پرسش و پاسخ رو هم برام بفرستین
http://codepen.io/shahab-kh/project/editor/XVaQYE
ممنون از سایت خوبتون
6. اگر یک عنصر inline را شناور کنیم مهم نیست که مقدار display آن چه باشد, در هر صورت عنصر به نوع block تبدیل می شود.
سلام استاد خسته نباشید من با این قسمت مشکل دارم حس میکنم المنت های block و inline شبیه به inline-block میشن با این تقاوت که روی عناصر مجاور تاثیر میزان.
ممنون که این قدرررر جامع توضیح دادین
محتوای وب سایت از یک سایت دیگه ای به نام css-tricks.com گرفته شده برای من عجیبه که تعریف از خودتون نمیارید و همه چیزتون تقلیده همه چیزتون من متاسفم واقعا خب اون مخو تکون بدید یه چیزی بسازید واسه خودتون باشه… :(
سلام.وقت بخیر…
نمیدونم چرا متوجه این دوتا موضوع که عنوان کردید نمیشم. اگر امکانش هست بیشتر توضیح میدیدلطفا…
6. اگر یک عنصر inline را شناور کنیم مهم نیست که مقدار display آن چه باشد, در هر صورت عنصر به نوع block تبدیل می شود.
(البته به غیر از حالت none)
8. عناصری که مقدار position آنها absolute یا fixed است نمی توانند شناور شوند.
سلام،
6. یعنی اگر به عنصر inline ویژگی float از نوع right یا left بدیم، اون عنصر تبدیل به block میشه خودکار و مشخصات بلاک رو به خودش میگیره.
7. چون عناصری که position اینچنینی دارند از flow صفحه خارج میشن دیگه نمیشه بهشون float داد چون تاثیری روشون نداره.
راستش بهتر از این با نوشتن نمیتونم بگم :) بهتره خودتون دمو بسازید و ببینید چه اتفاقی میافته تا بهتر متوجه بشید.
دمت گرم بهترین هستید
به مام سر بزنید
دوست دارم بدونم حالا بعد بیشتر از 3 سال داری چیکار میکنی
کی؟ float یا من؟
من دارم صبحونه میخورم ;)
سلام یه چیزی رو درک نکردم
گفتید وقتی یک عنصر float میگیره ارتفاعش تاثیری بر ارتفاع پدر نمیزاره درسته ؟
حالا من یک div پدر دارم داخلش یک img حالا این img من float چپ گرفته ولی وقتی ارتفاعشو زیاد میکنم تا از پدر خارج بشه اما رو پدر تاثیر میزاره و اونم(پدر) ارتفاعش زیاد میشه ! کجای کارم ملینگه دقیقا ؟
سلام، باید ببینیم چه چیزایی به عنصر پدر دادید، مثلا اگر overflow داشته باشه این حرفی که میگیم صدق نمیکنه و …
طبق آموزش های clear پیش رفتم ولی نتیجه همونه
.box {
border:3px solid #000;
}
img {
float:left;
}
.clearfix {
clear: both;
}
aaaaaaaaa
لینک تصویر خروجی کد:
http://up.ghalebgraph.ir/up/galebgraph/file/1395/03/Shot 0042.png
برای این مواقع یا یک دمو مرتب توی سایت کدپن درست کنید لینک بزارید یا توی پنل پرسش و پاسخ مطرح کنید که بتونید کدتون رو قرار بدید در نتیجه بقیه بتونند کمکتون کنند.
سلام من نفهمیدم که چه مواقعی باید از این ویژگی استفاده کرد.متوجه کاری که میکنند شدم اما نفهمیدم در چه مواقعی کاربرد داره اگه میشه مثال بزنید.
سلام. خسته نباشی رفیق.عنصری که float بشه حتی اگه display:block باشه فک کنم inline میشه.درسته؟
اگر اشتباه میکنم لطف میکنید دلیلشو بگید اگر هم درست میگم متن رو اصلاح کنید.بازم درود برشما
سلام، float هیچ عنصری رو inline نمیکنه ولی اگر عنصری inline باشه با float تبدیل به block میشه.
سلام استاد
من هر کاری میکنم کلاس clear واسه اون باکس قرمز رنگ نمیدونم چرا اعمال نمیشه.باکس زرد رنگ همچنان سمت چپ باکس قرمز قرار داره.با سرچ کردن هم به جواب نرسیدم.
اگه امکانش هست بنده رو راهنمایی بفرمایید.با تشکر
Float
.container{
height:300px;
background-color:gray;
}
.box{
width:50px;
height:50px;
}
.red{
background-color:red;
float:right;
}
.yellow{
background-color:yellow;
}
.green{
background-color:green;
}
.clearfix::after {
content: “”;
clear: both;
display: table;
}
سلام، برای اینکه من بتونم کد رو ببینم (مخصوصا HTML) یک دمو درست کنید اینجا لینک بدین (از سایت کدپن میتونید استفاده کنید.)
در کل مراقب ترتیب عناصر HTML باشید، احتمال داره مشکل از اون باشه
سلام وقت بخیر
واقعا دست مریزاد داری خیلی خوب و جامع بود دمت گرمـ