ویژگی CSS شناور

روش دیگر برای دستکاری جریان عادی و ساکن صفحات وب ، با ویژگی float است. شما قبلاً در بخش قبلی از این ویژگی برای بسته بندی متن در تصاویر استفاده کرده اید. اما می توانید از ویژگی float برای داشتن ستون های متن در کنار هم استفاده کنید. حتی می توانید از float برای داشتن نوارهای پیمایش در سمت چپ و راست صفحات خود استفاده کنید. (ما از float در صفحه آرایی خود که به زودی ارائه می شود استفاده خواهیم کرد.)
به عنوان نمونه ای از ستون شناور ، به تصویر زیر نگاهی بیندازید که از یک مرورگر گرفته شده است:

Two columns positioned side-by-side using the CSS float property

بنابراین ما دو ستون متن در کنار هم داریم. مورد اول دارای پس زمینه خاکستری است بنابراین می توانید ستون را بهتر ببینید. همچنین حاشیه 10 پیکسل دارد. اینجا CSS است:

The CSS for floated columns

و HTML:

The HTML for floated columns

برای HTML ، ما فقط از برچسب های DIV برای دو پاراگراف متن استفاده کرده ایم. پاراگراف اول کلاس CSS را در آن اعمال می کند.
به هر دو مورد در مورد کد CSS توجه کنید. اولین چیزی که باید توجه کنید این است که ما از float استفاده کرده ایم: چپ. دومین نکته قابل توجه این است که ما برای ستون عرض 200 پیکسل تعیین کرده ایم. اگر عرض تعیین نکنید ، هر متنی که برای ستون خود داشته باشید به سادگی از چپ به راست جریان می یابد.
با این وجود رویکرد ما مشکلی دارد. دوباره نگاهی به ستون های مرورگر بیندازید. اگرچه آنها به زیبایی کنار هم به نظر می رسند ، اما این فقط به این دلیل است که ما مرورگر را دستکاری کردیم. ما عمداً آن را کوچکتر کردیم تا متن متن خود تغییر اندازه دهد. اگر مرورگر را بزرگتر کنیم ، آنچه اتفاق می افتد:

 A browser view of two floated columns

متن ستون دوم از چپ به راست کشیده می شود تا فضای موجود را پر کند.
برای متوقف کردن این کار ، می توانید کلاس را به DIV دوم اضافه کنید:

The HTML for floated columns with DIV added

اکنون هر دو پاراگراف متن در سمت چپ شناور هستند و دارای عرض 200 پیکسل هستند. اکنون می توان اندازه مرورگر را تغییر داد و دو ستون در جای خود باقی خواهند ماند.
برای شروع متن در یک خط جدید در زیر ستون ها ، می توانید از ویژگی پاک در CSS استفاده کنید ، به یاد داشته باشید:

.clear {
clear: left;
}

این مقدار float را پاک می کند و شما را به جریان ساکن و نرمال برمی گرداند. (بسته به نیاز خود می توانید چپ را با راست یا هر دو جایگزین کنید)
در درس بعدی ، نحوه ایجاد یک طرح ساده یک ستونی را مشاهده خواهید کرد. این به شما عناصر جدید HTML5 را معرفی می کند.