صفت clear در CSS

صفت clear در CSS

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

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

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

این صفت 3 ویژگی دارد:

اولین صفت left :سمت چپ متن هیچ عکس یا متنی نمی تواند قرار بگیرد.

دومین ویژگی right :در سمت راست آن هیچ متن و عکسی قرار نگیرد.

آخرین ویژگی both :نه در سمت راست و نه در سمت چپ آن چیزی قرار نگیرد.

 

در 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/clear.png" width="100px" height="100px">
<p>این متن شماره ی یک میباشد.</p>
<p class="nameclass">این متن شماره ی  دو میباشد.</p>

</body>
</html>

 

در CSS :

img{
    float: left;
}
.nameclass{
    clear: both;
}

 

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

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

 

خوب در مثال بالا ببرای عکسمون صفت float:right استفاده کردیم وبرای تگ <p> هم از صفت clear:both استفاده شده است، یعنی متن شماره ی یک یا عکس در کنار آن قرار نگیرد.

در مثال پایین از صفت clear:both استفاده نشده است.

 

در 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>این متن شماره ی یک میباشد.</p>
<p class="nameclass">این متن شماره ی  دو میباشد.</p>

</body>
</html>

 

در CSS :

img{
    float: left;
}

 

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

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

 

برچسب

نویسنده

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

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

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

نظر دادن

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


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

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

Please publish modules in offcanvas position.