گروه مقاله : CSS
تاريخ انتشار : 1396/03/02 - 14:37
كد :7562

آموزش صفحه بندی با CSS توسط float and clear

در این مقاله در باره float and clear در صفحه بندی صحبت خواهیم کرد. این ویژگی نقش مهمی در ریسپانسیو کردن صفحات بازی میکند.

آموزش طراحی سایت ساختار سایت با ویژگی float

آموزش صفحه بندی با CSS توسط float and clear

ویژگی float مشخص می کند که یک المان باید شناور باشد یا خیر

ویژگی clear برای کنتر رفتار عناصر شناور به کار میرود.

ویژگی float :

استفاده از این ویژگی آسان است  . این ویژگی میتواند برای اینکه متنی را در اطراف یک عکس به نمایش در بیاورید استفاده شود.

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

img {
float: right;
margin: 0 0 10px 10px;
}

مشاهده نتیجه

ویژگی clear

ویژگی clear  برای کنترل رفتار عنصر شناور استفاده میشود.

عناصری که بعد از عنصر شناور قرار دارند عنصر شناور را احاطه می کنند برای جلوگیری از این مسئله از ویژگی clear استفاده کنید.

ویژگی clear مشخص می کند که کدام جهت از عنصر باید شناور شود و یا شناور نشود:

div {
clear: left;
}

مشاهده نتیجه

هک clearfix :

اگر المانی بلند تر از المان دیگر باشد و این المان بلند تر درون المان دیگر قرار داشته باشد المان بلند تر از محدوده خود فراتر خواهد رفت.

با افزودن overflow: auto; این مشکل حل خواهد شد:

.clearfix {
overflow: auto;
}

مشاهده نتیجه

ویژگی overflow:auto clearfix تا زمانیکه بتوانید بدرستی margins وpadding ها را کنترل کنید درست کار خواهد کرد برای اینکه مطمئن باشیم مشکلی پیش نمی آید بجای کد بالا از این کد استفاده کنید.

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

مشاهده نتیجه

به ::after شبه عنصر میگوییم و بعدا درباره آن صحبت خواهیم کرد.

نمونه های برای ظاهر سایت

اینکه تمام ظاهر یک سایت از ویژگی 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 در Css

ویژگی

توضیحات

clear

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

float

تعیین شناور شدن و یا نشدن یک المان

overflow

مشخص میکند که اگر المان از فضای خود بزرگتر باشد چه اتفاقی رخ دهد.

overflow-x

مشخص میکند که گوشه های چپ و راست المان در صورت بزرگتر بودن متن چه خواهند کرد

overflow-y

مشخص میکند که گوشه های بالا و پایین المان در صورت بزرگتر بودن متن چه خواهند کرد

 

 

تعداد بازديد : 5068
نظرات كاربران :