چیدمان عناصر توسط خاصیت float و clear

با عرض سلام و درود خدمت شما دوستان و عزیزان

امروز برای شما یه آموزش کاربردی و مفید رو قرار دادم که به نظر من پایه و اساس چیدمان عناصر و طراحی قالب هست .

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

خاصیت float : این خاصیت می تونه عنصر شما رو از لحاظ افقی در داخل عنصر بالا دست خود یا والد ، به یک سمت بچسبونه . اگه مقدار اون رو right بذارید به سمت راست میچسبه و اگه left بذارید به سمت چپ .

فاصله ی سمت راست رو همین طوری گذاشتم ، مشکل از کد نبوده 😀

به شکل زیر توجه کنید :

خاصیت float و clear

خاصیت clear : عناصر بعد از یک عنصری که دارای خاصیت float هست می تونن به یک سمت جاری بشن ، با استفاده از خاصیت clear می تونیم تعیین کنیم به کدوم سمت برن ، به سمت چپ باکس فعلی یا راست اون ؟! با استفاده از دو مقدار left و right

فرض کنیم تو شکل زیر باکس 1 و باکس 2 خاصیت float داشته باشن و باکس 2 دارای خاصیت clear با مقدار left باشه . در این صورت چون خاصیت float هر دو دارای مقدار right هست هر دو به سمت راست می چسبن و باکس دوم باید زیر باکس 1 باشه ولی چون باکس 2 خاصیت clear با مقدار left داره و مقدار عرض این باکس اجازه ی قرار گیری رو کنار باکس اول میده ، پس در سمت چپ باکس اول قرار می گیره .ولی اگه مقدار عرض باکس 2 از فضای خالی سمت چپ باکس 1 بیشتر بود به سمت پایین باکس 1 سرازیر میشد .

توجهی به فاصله ها نداشته باشید 😀

خاصیت float و clear

جمع بندی : خاصیت float موقعیت افقی رو مشخص می کنه و خاصیت clear موقعیت افقی عنصر ثانویه رو نسبت به عنصر اولیه که مقدار float داره ، تعیین می کنه .

امیدوارم با این توضیحات مطلب رو متوجه شده باشید ، اگه به مشکلی برخورد کردید دوستان و من در خدمتیم

تا یه آموزش دیگه شما رو به خدای بزرگ میسپارم

فرادرس

برچسب ها : ، ، ، ،