css

صفت clear در CSS – آموزش CSS

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


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

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

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

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

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

در HTML :

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

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

</body>
</html>

در CSS :

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

css

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

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

 

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

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

در HTML :

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

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

</body>
</html>

در CSS :

img{
    float: left;
}

 

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

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

Related Articles

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این مطلب را از دست ندهید!

Close
Close