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

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

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

ویژگی 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%;
}