خاصیت float
float در لغت به معنی «شناور شدن/بودن» است. از این خاصیت برای موقعیت دهی به عناصر مختلف صفحه استفاده می شود و یکی از مقادیر زیر را می گیرد:
left: در این حالت عنصر مورد نظر به سمت چپ نگه دارنده اش1 (container) می رود یا به قولی در سمت چپ شناور می شودright: در این حالت عنصر مورد نظر به سمت راست نگه دارنده اش (container) می رود یا به قولی در سمت راست شناور می شودnone: در این حالت عنصر مورد نظر اصلا شناور نمی شود و همان جایی که هست می ماند (حالت پیش فرض همین مورد است)inherit: در این حالت عنصر مورد نظر مقدار float را از عنصر پدرش به ارث می برد.
1- منظور از container یا نگه دارنده، همان پدر عنصر است. اگر عنصر x درون عنصرِ y قرار داشته باشد آنگاه عنصر y نگه دارنده یا پدر عنصر x محسوب می شود.
بیایید از هر کدام مثالی بزنیم!
مثال هایی از float
float: right
در این مثال می خواهیم به تصویرمان بگوییم که به سمت راست متن برود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPEhtml>
<html>
<head>
<style>
img {
float:right;
}
</style>
</head>
<body>
<p>Inthisexample,the image will floattothe right inthe paragraph,andthe text inthe paragraph will wrap around the image.</p>
<p><img src="https://www.w3schools.com/css/pineapple.jpg"alt="Pineapple"style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet,consectetur adipiscing elit.Phasellus imperdiet,nulla et dictum interdum,nisi lorem egestas odio,vitae scelerisque enim ligula venenatis dolor.Maecenas nisl est,ultrices nec congue eget,auctor vitae massa.Fusce luctus vestibulum augue ut aliquet.Mauris ante ligula,facilisis sed ornare eu,lobortis inodio.Praesent convallis urnaalacus interdum ut hendrerit risus congue.Nunc sagittis dictum nisi,sed ullamcorper ipsum dignissim ac.Inat libero sed nunc venenatis imperdiet sed ornare turpis.Donec vitae dui eget tellus gravida venenatis.Integerfringilla congue eros non fermentum.Sed dapibus pulvinar nibh tempor porta.Cras ac leo purus.Mauris quis diam velit.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
float: left
در این مثال می خواهیم به تصویرمان بگوییم که به سمت چپ متن برود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPEhtml>
<html>
<head>
<style>
img {
float:left;
}
</style>
</head>
<body>
<p>Inthisexample,the image will floattothe left inthe paragraph,andthe text inthe paragraph will wrap around the image.</p>
<p><img src="https://www.w3schools.com/css/pineapple.jpg"alt="Pineapple"style="width:170px;height:170px;margin-right:15px;">
Lorem ipsum dolor sit amet,consectetur adipiscing elit.Phasellus imperdiet,nulla et dictum interdum,nisi lorem egestas odio,vitae scelerisque enim ligula venenatis dolor.Maecenas nisl est,ultrices nec congue eget,auctor vitae massa.Fusce luctus vestibulum augue ut aliquet.Mauris ante ligula,facilisis sed ornare eu,lobortis inodio.Praesent convallis urnaalacus interdum ut hendrerit risus congue.Nunc sagittis dictum nisi,sed ullamcorper ipsum dignissim ac.Inat libero sed nunc venenatis imperdiet sed ornare turpis.Donec vitae dui eget tellus gravida venenatis.Integerfringilla congue eros non fermentum.Sed dapibus pulvinar nibh tempor porta.Cras ac leo purus.Mauris quis diam velit.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
float: none
در این مثال به تصویر هیچ دستوری نمی دهیم و می گذاریم به حالت عادی در هر جایی خواست قرار بگیرد. این حالت همان حالت پیش فرض است:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPEhtml>
<html>
<head>
<style>
img {
float:none;
}
</style>
</head>
<body>
<p>Inthisexample,the image will be displayed just where it occurs inthe text(float:none;).</p>
<p><img src="https://www.w3schools.com/css/pineapple.jpg"alt="Pineapple"style="width:170px;height:170px;">
Lorem ipsum dolor sit amet,consectetur adipiscing elit.Phasellus imperdiet,nulla et dictum interdum,nisi lorem egestas odio,vitae scelerisque enim ligula venenatis dolor.Maecenas nisl est,ultrices nec congue eget,auctor vitae massa.Fusce luctus vestibulum augue ut aliquet.Mauris ante ligula,facilisis sed ornare eu,lobortis inodio.Praesent convallis urnaalacus interdum ut hendrerit risus congue.Nunc sagittis dictum nisi,sed ullamcorper ipsum dignissim ac.Inat libero sed nunc venenatis imperdiet sed ornare turpis.Donec vitae dui eget tellus gravida venenatis.Integerfringilla congue eros non fermentum.Sed dapibus pulvinar nibh tempor porta.Cras ac leo purus.Mauris quis diam velit.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
خصوصیت clear و مشکل معروف clearfix
خاصیت clear مشخص می کند که چه عناصری می توانند در کنار عناصر clear در حالت شناور باقی بمانند. شاید بحث کمی برایتان گنگ باشد اما نگران نباشید، در ادامه کاملا متوجه آن خواهید شد. مقادیر مجاز خاصیت clear از این قرار اند:
none: عنصری که این مقدار را بگیرد به بقیه ی عناصر اجازه میدهد در کنارش شناور شوند. حالت پیش فرض همین استleft: عنصری که این مقدار را بگیرد به بقیه ی عناصر اجازه میدهد تنها در سمت چپ اش شناور شوندright: عنصری که این مقدار را بگیرد به بقیه ی عناصر اجازه میدهد تنها در سمت راست اش شناور شوندboth: عنصری که این مقدار را بگیرد به هیچ عنصری در هیچ سمتی اجازه ی شناور شدن نمی دهدinherit: عنصر مورد نظر مقدار clear را از پدرش به ارث می برد
در واقع clear در لغت به معنی «پاک کردن» است. حالا متوجه شدید؟ اگر به عنصری clear بدهیم یعنی می خواهیم اطراف آن را از عناصر شناور پاکسازی کنیم!
ما می توانیم از مقدار clear در موقعیت های مختلفی استفاده کنیم اما شایع ترین استفاده ی آن بعد از دستور float است. کار شما این است که مقدار float را با مقدار clear یکی کنید؛ به طور مثال اگر به float مقدار right داده اید باید به clear هم right بدهید.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.div1 {
float:left;
width:100px;
height:50px;
margin:10px;
border:3pxsolid#73AD21;
}
.div2 {
border:1pxsolidred;
}
.div3 {
float:left;
width:100px;
height:50px;
margin:10px;
border:3pxsolid#73AD21;
}
.div4 {
border:1pxsolidred;
clear:left;
}
</style>
</head>
<body dir='rtl'>
<h2>بدوناستفادهازclear</h2>
<div class="div1">div1</div>
<div class="div2">div2-دقتکنیدکهدرسورسکدHTMLعنصرdiv2بعدازعنصرdiv1آمدهاست.
اماازآنجاییکهdiv1بهسمتچپشناورمیشود
متنdiv2درکنارعنصرdiv1قرارمیگیردومشکلیندارد.
</div>
<br><br>
<h2>بااستفادهازclear</h2>
<div class="div3">div3</div>
<div class="div4">div4-دراینقسمتclear:leftراداریموبههمیندلیل
div4پایینترازdiv3قرارمیگیرد.مقدارleftبرایخاصیتclearبدینمعناستکهعناصرشناورازسمتچپراپاکسازیمیکند
بههمیندلیلنوشتههایاینdivنمی توانندکنارنوشتههایdiv3باشندوبهخطبعدمنتقلمیشوند.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حتما به صفحه ی خروجی این مثال بروید؛ در آنجا توضیحاتی خدمتتان ارائه کرده ام.
تا اینجای کار مشکلی نیست و درک آن ساده است اما حتما مشکل معروف clearfix را شنیده اید! تعریف ساده ی این مشکل در مثال زیر قرار دارد: اگر عنصری از عنصر نگه دارنده (پدرش) بلند تر باشد (از نظر ارتفاع) و همچنین شناور (floated) هم باشد، از عنصر نگه دارنده بیرون می زند. به این تصویر نگاه کنید:
مشکل معروف clearfix – در این مثال عنصر پدر یا نگه دارنده کوچک تر از عنصر فرزند است بنابراین عنصر فرزند از نگه دارنده اش بیرون می زند
برای حل این مشکل می توانیم از ;overflow: auto استفاده کنیم. به این مثال توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
border:3pxsolid#4CAF50;
padding:5px;
}
.img1 {
float:right;
}
.clearfix {
overflow:auto;
}
.img2 {
float:right;
}
</style>
</head>
<body>
<p>Inthisexample,the image istaller than the element containing it,andit isfloated,so it overflows outside of its container:</p>
<div>
<img class="img1"src="https://www.w3schools.com/css/pineapple.jpg"alt="Pineapple"width="170"height="170">
Lorem ipsum dolor sit amet,consectetur adipiscing elit.Phasellus imperdiet,nulla et dictum interdum...
</div>
<pstyle="clear:right">Addaclearfix classwith overflow:auto;tothe containing element,tofix thisproblem:</p>
<div class="clearfix">
<img class="img2"src="https://www.w3schools.com/css/pineapple.jpg"alt="Pineapple"width="170"height="170">
Lorem ipsum dolor sit amet,consectetur adipiscing elit.Phasellus imperdiet,nulla et dictum interdum...
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تصحیح این مشکل با استفاده از ;overflow: auto راه حل خوبی است، البته تا زمانی که بتوانید اندازه ی margin و padding هایتان را کنترل کنید. اگر نتوانید این دو را کنترل کنید، صفحه تان اسکرول بار میگیرد و ظاهر زشتی پیدا می کند. به همین خاطر این روش دیگر قدیمی شده است و کسی از آن استفاده نمی کند. به نظر شما راه حل مدرن چیست؟
راه حل مدرن همان clearfix است. به کد زیر نگاهی بیندازید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
border:3pxsolid#4CAF50;
padding:5px;
}
.img1 {
float:right;
}
.clearfix::after {
content:"";
clear:both;
display:table;
}
.img2 {
float:right;
}
</style>
</head>
<body>
<p>Inthisexample,the image istaller than the element containing it,andit isfloated,so it overflows outside of its container:</p>
<div>
<h2>Without Clearfix</h2>
<img class="img1"src="https://www.w3schools.com/css/pineapple.jpg"alt="Pineapple"width="170"height="170">
Lorem ipsum dolor sit amet,consectetur adipiscing elit.Phasellus imperdiet,nulla et dictum interdum...
</div>
<pstyle="clear:right">Add the clearfix hack tothe containing element,tofix thisproblem:</p>
<div class="clearfix">
<h2>With Clearfix</h2>
<img class="img2"src="https://www.w3schools.com/css/pineapple.jpg"alt="Pineapple"width="170"height="170">
Lorem ipsum dolor sit amet,consectetur adipiscing elit.Phasellus imperdiet,nulla et dictum interdum...
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در مورد شبه‌عنصرِ after:: در جلسات بعد صحبت خواهیم کرد اما بدانید که راه حل همین است و شما می توانید بدون اینکه دانشی در مورد after:: داشته باشید از این کد به همین صورتی که در مثال بالا آمده است استفاده کنید.
قابلیت های بیشتر float
با استفاده از خاصیت float می توانیم چندین قسمت مختلف از محتوا را دقیقا کنار هم قرار دهیم و قسمت های هم عرضرا به وجود بیاوریم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPEhtml>
<html>
<head>
<style>
* {
box-sizing:border-box;
}
.box {
float:left;
width:33.33%;
padding:50px;
}
.clearfix::after {
content:"";
clear:both;
display:table;
}
</style>
</head>
<body>
<h2>Grid of Boxes</h2>
<p>Floatboxes side by side:</p>
<div class="clearfix">
<div class="box"style="background-color:#bbb">
<p>Some text inside the box.</p>
</div>
<div class="box"style="background-color:#ccc">
<p>Some text inside the box.</p>
</div>
<div class="box"style="background-color:#ddd">
<p>Some text inside the box.</p>
</div>
</div>
<pdir='rtl'>
اگربهکدهادقتکنیدمتوجهخواهیدشدکهماازراهحلclearfixاستفادهکردهایموهمچنینازbox-sizingنیزبهرهگرفتهایمتامطمئنشویماندازهیاینقسمتهایمختلفومربعیشکلبهخاطرpaddingواینطورخصوصیتهابهمنمیریزد.برایمشاهدهیاثرآنها،میتوانیدایندودستورراازکدهاحذفکنید.
</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اگر به کدها دقت کنید متوجه خواهید شد که ما از راه حل clearfix استفاده کرده ایم و همچنین از box-sizing نیز بهره گرفته ایم تا مطمئن شویم اندازه ی این قسمت های مختلف و مربعی شکل به خاطر padding و چنین خصوصیت هایی بهم نمیریزد. برای مشاهده ی اثر آنها و تفاوت‌شان با حالت عادی، می توانید این دو دستور را از کدها حذف کنید.
یکی از استفاده های عملی این دستور کنار هم قرار دادن تصاویر مختلف در سایت ها است که حتما آن را در سایت های مختلف مشاهده کرده اید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPEhtml>
<html>
<head>
<style>
* {
box-sizing:border-box;
}
.img-container {
float:left;
width:33.33%;
padding:5px;
}
.clearfix::after {
content:"";
clear:both;
display:table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>Floatimages side by side:</p>
<div class="clearfix">
<div class="img-container">
<img src="https://www.w3schools.com/css/img_5terre.jpg"alt="Italy"style="width:100%">
</div>
<div class="img-container">
<img src="https://www.w3schools.com/css/img_forest.jpg"alt="Forest"style="width:100%">
</div>
<div class="img-container">
<img src="https://www.w3schools.com/css/img_mountains.jpg"alt="Mountains"style="width:100%">
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تا اینجای کار توانستیم قسمت های هم عرض را ایجاد کنیم اما اگر بخواهیم قسمت های هم ارتفاع داشته باشیم چطور؟ در این صورت باید از روش دیگری استفاده کنیم. ایجاد قسمت هایی با ارتفاع یکسان کار پیچیده تری است؛ به طور مثال یکی از راه حل ها این است که به این قسمت ها ارتفاع ثابت و یکسانی بدهیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPEhtml>
<html>
<head>
<style>
* {
box-sizing:border-box;
}
.box {
float:left;
width:50%;
padding:50px;
height:300px;
}
.clearfix::after {
content:"";
clear:both;
display:table;
}
</style>
</head>
<body>
<h2>Equal Height Boxes</h2>
<p>Floating boxes with equal heights:</p>
<div class="clearfix">
<div class="box"style="background-color:#bbb">
<h2>Box1</h2>
<p>Some content,some content,some content</p>
</div>
<div class="box"style="background-color:#ccc">
<h2>Box2</h2>
<p>Some content,some content,some content</p>
<p>Some content,some content,some content</p>
<p>Some content,some content,some content</p>
</div>
</div>
<pdir='rtl'>
اینروشاصلاروشخوبینیست.اینراهحلتنهازمانیکارمیکندکهمابتوانیمتضمینکنیمکهاندازهیاینقسمتهاهیچگاهتغییرنخواهدکرد.دردنیایواقعینمیتوانیمچنینتضمینیداشتهباشیم.بهطورمثالاگرکاربریباگوشیموبایلازسایتشمابازدیدکندظاهرسایتبههمخواهدریخت.برایتست،اندازهیمرورگرخودراکوچککنیدتاببینیدکهمحتوایbox2ازمحدودهاشبیرونمیزندوظاهرزشتیپیدامیکند.
</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
روش بسیار بهتری برای حل این مشکل وجود دارد و آن استفاده از Flexbox است:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.flex-container {
display:flex;
flex-wrap:nowrap;
background-color:DodgerBlue;
}
.flex-container .box {
background-color:#f1f1f1;
width:50%;
margin:10px;
text-align:center;
line-height:75px;
font-size:30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container">
<div class="box">Box1-Thisissome text tomake sure that the content gets really tall.Thisissome text tomake sure that the content gets really tall.</div>
<div class="box">Box2-My height will follow Box1.</div>
</div>
<p>Trytoresize the browser window tosee the flexible layout.</p>
<p><strong>Note:</strong>Flexbox isnotsupported inInternet Explorer10orearlier versions.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تنها مشکل Flexbox این است که در مرورگر Internet Explorer 10 و نسخه های قبل تر از آن کار نمی کند چرا که نسبتا جدید بوده و یکی از ویژگی های CSS3 محسوب می شود.
راه حل دیگر استفاده از کتابخانه های Grid در CSS می باشد که می توانید به سادگی با جست و جو در اینترنت آن ها را پیدا کنید.
کمی خلاق تر
با کمی خلاقیت بیشتر می توانیم کار های زیبایی با float انجام دهیم. یکی از آن ها ایجاد منوی سایت ها است:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPEhtml>
<html>
<head>
<style>
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
}
li {
float:left;
}
li a {
display:inline-block;
color:white;
text-align:center;
padding:14px16px;
text-decoration:none;
}
li a:hover {
background-color:#111;
}
.active {
background-color:red;
}
</style>
</head>
<body>
<ul>
<li><ahref="#home"class="active">خانه</a></li>
<li><ahref="#news">اخبار</a></li>
<li><ahref="#contact">تماسباما</a></li>
<li><ahref="#about">دربارهیما</a></li>
</ul>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همچنین می توانید طرح کلی یک سایت را با آن پیاده سازی کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<!DOCTYPEhtml>
<html>
<head>
<style>
* {
box-sizing:border-box;
}
.header, .footer {
background-color:grey;
color:white;
padding:15px;
}
.column {
float:left;
padding:15px;
}
.clearfix::after {
content:"";
clear:both;
display:table;
}
.menu {
width:25%;
}
.content {
width:75%;
}
.menu ul {
list-style-type:none;
margin:0;
padding:0;
}
.menu li {
padding:8px;
margin-bottom:8px;
background-color:#33b5e5;
color:#ffffff;
}
.menu li:hover {
background-color:#0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="clearfix">
<div class="column menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="column content">
<h1>The City</h1>
<p>Chania isthe capital of the Chania region on the island of Crete.The city can be divided intwo parts,the old town andthe modern city.</p>
<p>You will learn more about web layout andresponsive web pages inalater chapter.</p>
</div>
</div>
<div class="footer">
<p>Footer Text</p>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
به هم
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟