بیایید نگاهی به طراحی شبکه سایت بیندازیم و اجزای جداگانه را بشکنیم. بیایید بررسی کنیم که چرا float بسیار مفید است و همچنین روش معروف ساخت اولین شبکه وب از سه جریان و یک پاورقی سایت.
برای مطالعه ساخت شبکه از یک سایت ، باید بدانید که "جریان" چیست. جریان عناصر سایت است که یکی پس از دیگری واقع شده است. به عنوان مثال ، این می تواند عناصر div باشد که به طور پیش فرض یکی پس از دیگری می روند. اما می توان جریان را دوباره مرتب کرد و موقعیت عناصر بلوک را تغییر داد.
برای کنترل جریان ، از ویژگی float استفاده می کنیم که می تواند بلوک را در سمت چپ یا راست قرار دهد. نوشتن در پرونده CSS کافی است:
"class or block name" {float: راست / چپ؛ }
تنها عیب شناور توانایی "همپوشانی" یک بلوک بر روی بلوک دیگر است.
برای جلوگیری از دویدن ، از Clear استفاده می کنیم: هر دو - این ویژگی جریان اطراف بلوک را تنظیم می کند. عرض و ارتفاع را به صورت حداکثر و حداقل تنظیم می کنیم تا مقدار با توجه به اندازه محتوا (متن ، تصاویر) تشکیل شود. حاشیه - مقدار را به صورت خودکار تنظیم کنید تا بسته به محل بلوک به طور خودکار حاشیه های خارجی تشکیل شوند.
از آنجا که شناور می تواند بلوک ها را در دو جهت قرار دهد ، معمول است که سایت را به جریانهای چپ و راست تقسیم کنید. اگر برنامه نویس فقط به دو جریان نیاز داشته باشد ، شناورهای چپ و راست را ترک می کند ، اما اگر بیش از دو مورد وجود داشته باشد ، حاشیه ها را با استفاده از حاشیه تنظیم می کند. چگونه این اتفاق می افتد:
.column1 {float: left؛ عرض: 65 پیکسل حداقل ارتفاع: 50 پیکسل margin-right: 9px؛ // 9px از جعبه وسط}
2 جریان:
.column2 {float: left؛ // به بلوک سمت چپ ، اما بدون "همپوشانی" ، از آنجا که ما عرض حاشیه را اعمال کردیم: 80px؛ حداقل ارتفاع: 50 پیکسل }
3 جریان:
.column3 {float: right؛ عرض: 65 پیکسل حداقل ارتفاع: 50 پیکسل }
پرداختن به پاورقی (.footer):
.footer {clear: both؛ // دور هر دو طرف را بپیچید}
به این ترتیب ما با استفاده از float ، متشکل از سه جریان ، یک شبکه برای سایت ایجاد کردیم.
