صفت float در CSS

صفت float در CSS

توسط / CSS / پنج شنبه, 26 مرداد 1396 ساعت 10:27

در این بخش به آموزش صفت float میپردازیم. این صفت برای قرار گیری عناصر در مکان دلخواه شما استفاده می شود.

برای این صفت دو ویژگی تعریف شده است. ویژگی اول Left  به معنای چپ و ویژگی دوم Right به معنای راست می باشد. به مثال زیر توجه کنید:

در HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/blog/test.css">
    <title>test</title>
</head>
<body>

<img src="/blog/css.png" width="100px" height="100px">
<p class=”p1”>این متن شماره ی یک میباشد.</p>
<p>این متن شماره ی  دو میباشد.</p>

</body>
</html>

در CSS : 

img{
    float: left;
}.p1{
    float: right;
}

این متن شماره ی یک میباشد.

این متن شماره ی دو میباشد.

 

 

 

در این جا ما به عکسمون float با ویژگی Left را داده ایم و همچنین برای متن اول نیز از float:right استفاده کرده ایم.  همین طور که می بینید عکس در سمت چپ صفحه و متن اول در قسمت راست صفحه قرار گرفته اند.

ویژگی دیگری نیز این صفت دارد که می توان از آن هم در مواقعی استفاده کرد.none صفتی است که اگر بخش مورد نظر float از قبل گرفته باشد، می توان آن صفت را از بین برد.

این صفت کاربرد زیادی در برنامه نویسی دارد. ولی یکی از کم بود های این صفت می توان به نداشتن ویژگی center اشاره کرد. هر چند برای این که بخش مورد نظر در وسط قرار گیرد صفات دیگری چون text-aling و margin وجود دارد.

نویسنده

حسین منتظرتبریزی

حسین منتظرتبریزی

دانشجوی رشته ی نرم افزار علاقه مند به برنامه نویسی ،بازی سازی و طراحی سایت

نظر دادن

جهت شرکت در دوره  رایگان  7 اصل مدیریت مطلوب کسب و کار لطفا نام و ایمیل خود را وارد نمایید


ایران آکادمی را در شبکه های مجازی دنبال کنید:

کلیه حقوق مادی و معنوی این وب سایت متعلق به ایران آکادمی می‌باشد. قوانین این وب سایت، مبتنی بر قوانین جاری جمهوری اسلامی ایران است. © ۱۳۹۶

Please publish modules in offcanvas position.