ویژگی CSS float کنترل موقعیت‌بندی و فرمت‌بندی محتوا در صفحه است. این ویژگی یک عنصر را در سمت راست یا چپ مخزن قرار می‌دهد، اجازه می‌دهد تا متن و سایر عناصر درون خطی اطراف آن قرار بگیرند.
ویژگی float از طرح بلوک استفاده می‌کند، بنابراین در برخی موارد مقدار محاسبه‌شده ویژگی display را تنظیم می‌کند:
- inline به block
- inline-block به block
- inline-table به table
- table-row به block
- table-row-group به block
- table-column به block
- table-column-group به block
- table-cell به block
- table-caption به block
- table-header-group به block
- table-footer-group به block
- inline-flex به flex
- inline-grid به grid
این فصل در مورد استفاده از ویژگی float بحث می‌کند.
مقادیر ممکن
در زیر تمام مقادیر ممکنی که می‌توان برای ویژگی float استفاده کرد آمده است:
- none: عنصر شناور نمی‌شود. این مقدار پیش‌فرض است.
- left: عنصر به سمت چپ مخزن شناور می‌شود.
- right: عنصر به سمت راست مخزن شناور می‌شود.
- inline-start: عنصر به سمت شروع بلوک محتوای خود شناور می‌شود. (برای اسکریپت‌های ltr، سمت چپ و برای اسکریپت‌های rtl، سمت راست)
- inline-end: عنصر به سمت پایان بلوک محتوای خود شناور می‌شود. (برای اسکریپت‌های ltr، سمت راست و برای اسکریپت‌های rtl، سمت چپ)
مقادیر inline-start و inline-end فقط توسط مرورگرهای Firefox و Safari پشتیبانی می‌شوند.
Applies to
این ویژگی برای تمام عناصر قابل اعمال است، اما تأثیری ندارد اگر مقدار display آن none باشد.
Syntax
float: left | right | inline-start | inline-end | none;توضیحات
- left: عنصر به سمت چپ مخزن شناور می‌شود.
- right: عنصر به سمت راست مخزن شناور می‌شود.
- inline-start: عنصر به سمت شروع بلوک محتوای خود شناور می‌شود. (برای اسکریپت‌های ltr، سمت چپ و برای اسکریپت‌های rtl، سمت راست)
- inline-end: عنصر به سمت پایان بلوک محتوای خود شناور می‌شود. (برای اسکریپت‌های ltr، سمت راست و برای اسکریپت‌های rtl، سمت چپ)
- none: عنصر شناور نمی‌شود. این مقدار پیش‌فرض است.
ویژگی float تأثیری بر محتوای عنصرهای مجاور دارد. مقادیر left و right باعث می‌شوند که محتوای عناصر بعدی به سمت چپ یا راست عنصر شناور موقعیت‌گیری کند.
مثال
<html>
<head>
<style>
div {
margin: 5px;
width: 50px;
height: 150px;
}
.left {
float: left;
background: yellow;
}
.right {
float: right;
background: cyan;
}
.inherit{
float: inherit;
background: pink;
}
</style>
</head>
<body>
<div class="left">1</div>
<div class="right">2
<div class="inherit">3</div>
</div>
<p>There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration insome form, by injected humour,
or randomised words which don't look even slightly believable.
</p>
</body>
</html>
در این مثال، دو عنصر به نام‌های left و right به ترتیب به سمت چپ و راست مخزن شناور می‌شوند. همچنین یک عنصر دیگر با کلاس inherit و با مقدار float: inherit درون عنصر right قرار داده شده است که ویژگی شناوری از پدر مستقیم خود را ارث می‌برد.
Equal Width Columns
این بخش نحوه ایجاد یک طرح دو ستونه با عرض‌های مساوی را با استفاده از ویژگی float: right توضیح می‌دهد. در اینجا دو جعبه شبکه‌ای به راست یک مخزن شناور می‌شوند.
مثال
<html>
<head>
<style>
.grid-box {
float: right;
width: 50%;
padding: 30px;
box-sizing: border-box;
text-align: center;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h4>The first red color grid box is placed on the right side.</h3>
<div class="grid-container">
<div class="grid-box" style="background-color:#f0610e;">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<div class="grid-box" style="background-color:#86f00e;">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
</div>
</body>
</html>در این مثال، دو جعبه شبکه‌ای به نام‌های grid-box به عرض ۵۰٪ مخزن grid-container به راست شناور شده‌اند. ویژگی ::after نیز برای مخزن grid-container به منظور پاک کردن اعصاب استفاده شده است.
Equal Height Columns
این بخش نشان می‌دهد که چگونه یک طرح دو ستونه با ارتفاع‌های مساوی را با استفاده از ویژگی float: left ایجاد کنیم. در اینجا دو جعبه شبکه‌ای به نام grid-box به سمت چپ یک مخزن شناور شده‌اند.
مثال
<html>
<head>
<style>
.grid-box {
float: left;
width: 50%;
height: 200px;
padding: 30px;
box-sizing: border-box;
text-align: center;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h4>The first red color grid box is placed on the left side.</h3>
<div class="grid-container">
<div class="grid-box" style="background-color:#f0610e;">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<div class="grid-box" style="background-color:#86f00e;">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
</div>
</body>
</html>در این مثال، دو جعبه شبکه‌ای با نام grid-box و عرض ۵۰٪ به سمت چپ مخزن grid-container شناور شده‌اند. ویژگی ::after نیز برای مخزن grid-container به منظور پاک کردن اعصاب استفاده شده است.
Images Next To Each Other
در این بخش، یک طرح ساده با چهار تصویر در کنار یکدیگر با استفاده از المان‌های شناور ارائه شده است. ویژگی float: right تصویر را به سمت راست درون مخزن موقعیت می‌دهد.
مثال
<html>
<head>
<style>
.grid-box {
float: right;
width: 25%;
padding: 3px;
box-sizing: border-box;
text-align: center;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h4>The first image is placed on the right side, while the rest of the images are also right aligned within the container.</h4>
<div class="grid-container">
<div class="grid-box">
<img class="tutimg" src="images/orange-flower.jpg" width="100%" height="50%" />
<p>Orange color flower</p>
</div>
<div class="grid-box">
<img class="tutimg" src="images/see.jpg" width="100%" height="50%" />
<p>see</p>
</div>
<div class="grid-box">
<img class="tutimg" src="images/tree.jpg" width="100%" height="50%" />
<p>Tree</p>
</div>
<div class="grid-box">
<img class="tutimg" src="images/red-flower.jpg" width="100%" height="50%" />
<p>Red color flower</p>
</div>
</div>
</body>
</html>در این مثال، چهار تصویر در المان‌های شناور با نام grid-box قرار داده شده‌اند. این تصاویر به طرف راست مخزن شناور شده‌اند. ویژگی ::after نیز برای مخزن grid-container به منظور پاک کردن فضای پس از محتوا استفاده شده است.
Flexible Boxes
در این بخش، یک طرح با دو ستون در یک مخزن انعطاف‌پذیر ایجاد می‌شود. برای این کار، از ویژگی display: flex برای تبدیل مخزن به یک مخزن انعطاف‌پذیر استفاده می‌شود و ویژگی flex-nowrap مطمئن می‌شود که آیتم‌های انعطاف‌پذیر در یک ردیف تنها قرار داشته باشند حتی اگر عرض نمایشگر کاهش یابد.
مثال
<html>
<head>
<style>
.grid-container {
display: flex;
flex-wrap: nowrap;
background-color: #f0610e;
}
.grid-box {
width: 50%;
padding: 30px;
box-sizing: border-box;
text-align: center;
background-color: #86f00e;
margin: 15px;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h4>Resize the browser window to see the effect.</h3>
<div class="grid-container">
<div class="grid-box">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
insome form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<div class="grid-box">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
</div>
</body>
</html>در این مثال، دو محتوای grid-box درون یک مخزن grid-container انعطاف‌پذیر قرار داده شده‌اند. محتویات داخل این محتواها با استفاده از ویژگی display: flex در یک ردیف تنها باقی می‌مانند و بنابراین همواره به صورت دو ستونی نمایش داده می‌شوند، حتی در صورت کوچک‌تر شدن عرض صفحه.
Web Layout
در این بخش، از ویژگی float برای ایجاد یک منوی افقی با یک لیست از پیوندها استفاده می‌شود. پیوندهای منو با استفاده از ویژگی float: right به راست صفحه قرار می‌گیرند.
مثال
<html>
<head>
<style>
ul {
overflow: hidden;
background-color: #86f00e;
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
color: #000000;
padding: 15px;
text-decoration: none;
}
.active-link {
background-color: #7b8fc6;
}
</style>
</head>
<body>
<ul>
<li><a href="#tutorials" class="active-link">Tutorialspoint</a></li>
<li><a href="#home">Home</a></li>
<li><a href="#articles">Articles</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>در این مثال، یک منوی افقی با استفاده از لیست (ul) و فهرست (li) ساخته شده است. پیوندهای منو با استفاده از ویژگی float: right به راست صفحه منتقل می‌شوند. استفاده از overflow: hidden در ul برای جلوگیری از لغزش محتواهای li در خارج از منو مهم است.
Web Layout
در این بخش، از ویژگی float برای طراحی یک قالب وب استفاده می‌شود. این ویژگی به شما امکان می‌دهد که اجزای مختلف صفحه وب را به سمت راست یا چپ شیء مورد نظر قرار دهید.
مثال
<html>
<head>
<style>
ul {
overflow: hidden;
background-color: #86f00e;
list-style-type: none;
margin: 5px;
padding: 0;
}
li {
float: right;
}
li a {
display: block;
color: #000000;
padding: 15px;
text-decoration: none;
}
.active-link {
background-color: #7b8fc6;
}
.grid-container {
display: flex;
flex-wrap: nowrap;
}
.grid-box {
width: 100%;
height: 400px;
padding: 50px;
box-sizing: border-box;
text-align: center;
margin: 5px;
background-color: #f0ac0e;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
.btn1 {
background-color: #0e77f0;
padding: 10px;
font-size: medium;
width: 90px;
border: none;
float: right;
margin: 10px;
}
.btn2 {
background-color: #0e77f0;
padding: 10px;
font-size: medium;
width: 90px;
border: none;
float: left;
margin: 10px;
}
.image-container {
background-color: #f00ed2;
padding: 10px;
margin: 5px;
}
.images {
float: right;
width: 25%;
padding: 3px;
box-sizing: border-box;
text-align: center;
}
.image-container::after {
content: "";
clear: both;
display: table;
}
.footer {
padding: 20px;
text-align: center;
background: #67a482;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#tutorials" class="active-link">Tutorialspoint</a></li>
<li><a href="#home">Home</a></li>
<li><a href="#articles">Articles</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<div class="grid-container">
<div class="grid-box">
<h1>Tutorialspoint</h1>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
insome form, by injected humour, or randomised words which don't look even slightly believable. There
are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
<button class="btn1">HTML</button>
<button class="btn1">CSS</button>
<button class="btn2">Bootstrap</button>
<button class="btn2">React</button>
</div>
</div>
<div class="image-container">
<div class="images">
<img class="tutimg" src="images/orange-flower.jpg" width="100%" height="30%" />
</div>
<div class="images">
<img class="tutimg" src="images/see.jpg" width="100%" height="30%" />
</div>
<div class="images">
<img class="tutimg" src="images/tree.jpg" width="100%" height="30%" />
</div>
<div class="images">
<img class="tutimg" src="images/red-flower.jpg" width="100%" height="30%" />
</div>
</div>
<div class="footer">
<h3>© 2023 Tutorialspoint</h3>
</div>
</body>
</html>در این مثال، موارد زیر به کار گرفته شده‌اند:
- استفاده از
float: rightبرای منوی ناوبری و دکمه‌ها به سمت راست صفحه. - استفاده از
float: leftبرای دکمه‌های مربوط به Bootstrap و React به سمت چپ صفحه. - استفاده از
float: rightبرای تصاویر در کانتینرimage-containerتا به سمت راست صفحه منتقل شوند.
Paragraph
در این بخش از ویژگی float در CSS برای شناور کردن یک پاراگراف درون یک کانتینر استفاده شده است، به طوری که سایر عناصر موجود در کانتینر به اطراف آن پاراگراف قرار می‌گیرند.
مثال
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
font-size: large;
}
p {
float: right;
width: 150px;
height: 50px;
margin: 0 1em 1em;
padding: 5px;
text-align: center;
border: 2px solid #000000;
background-color: #f0610e;
}
</style>
</head>
<body>
<div>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum. <p>Tutorialspoint <br>CSS Float</p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
</div>
</body>
</html>در این مثال:
- یک پاراگراف با استفاده از
float: rightشناور شده است، که باعث می‌شود پاراگراف به سمت راست کانتینر شناور شود. - سایر عناصر موجود درون کانتینر، مانند متن و دیگر المان‌ها، به اطراف پاراگراف شناور می‌آیند و در کنار آن قرار می‌گیرند.
Images With Margin
در این بخش از CSS، تصاویر داخل یک کانتینر با تنظیماتی از جمله float و margin شناور می‌شوند، و عناصر دیگر درون کانتینر به اطراف آن تصاویر قرار می‌گیرند.
مثال
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
}
.tutimg {
float: left;
border: 3px solid #f0610e;
margin: 10px;
width: 150px;
height: 80px;
}
</style>
</head>
<body>
<div>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
<img class="tutimg" src="images/tutimg.png" />
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
</p>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
<img class="tutimg" src="images/tutimg.png" />
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are
</p>
</div>
</body>
</html>در این مثال:
- تصویر با استفاده از
float: leftبه سمت چپ کانتینر شناور شده است. marginبه تصویر اعمال شده تا محافظتی بین تصویر و متن فراهم شود.- عناصر موجود درون کانتینر، مانند متن و دیگر المان‌ها، به اطراف تصویر شناور می‌آیند و در کنار آن قرار می‌گیرند.
No Floating
در این بخش، می‌خواهیم جلوگیری کنیم که یک تصویر شناور شود. برای این کار، مقدار none به خاصیت float اختصاص داده می‌شود.
مثال
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
}
.tutimg {
float: none;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
}
</style>
</head>
<body>
<div>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
oftext.you need to be sure there isn't anything embarrassing hidden in the middle
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.making this the first true generator on the Internet of text.
<img class="tutimg" src="images/tutimg.png" />
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.
</p>
</div>
</body>
</html>
در این مثال:
- تصویر با استفاده از
float: noneاز شناوری خارج شده و در مکان اصلی خود نمایش داده می‌شود. - بنابراین، متن اطراف تصویر به همان شکلی که در کد آمده است، نمایش داده می‌شود و جلوی آن شناوری اعمال نمی‌شود.
Floating To Left or Right
در این بخش، می‌خواهیم تصاویر را به سمت چپ و راست داخل یک <div> شناور کنیم و برای آن‌ها padding و margin اعمال کنیم.
مثال
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 20px;
margin: 10px;
background-color: #86f00e;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 3px;
}
.tutimg2 {
float: right;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 3px;
}
</style>
</head>
<body>
<div>
<p> <img class="tutimg1" src="images/tutimg.png" />
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. you need to be sure there isn't anything embarrassing hidden in the middle
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.making
this the first true generator on the Internet of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.<img class="tutimg2" src="images/tutimg.png" />repeat
predefined chunks as necessary, making this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.first true generator on the Internet of text.
</p>
</div>
</body>
</html>در این مثال:
- تصویر اول (
tutimg1) به سمت چپ شناور می‌شود و حاشیه‌هایی با padding و margin دارد. - تصویر دوم (
tutimg2) به سمت راست شناور می‌شود و همچنین حاشیه‌هایی با padding و margin دارد. - با استفاده از
float: left;وfloat: right;، تصاویر به ترتیب از چپ و راست درون<div>قرار می‌گیرند و سایر عناصر درون<div>به آن‌ها می‌پیوندند.
Images Overlapping
در این بخش، می‌خواهیم تصاویر شناور را به گونه‌ای تنظیم کنیم که به یکدیگر همپوشانی دهند. برای این کار می‌توانیم با تنظیم مقادیر margin آن‌ها، تصاویر را همپوشانی دهیم. برای همپوشانی دو تصویر شناور، می‌توانیم مقدار margin یکی از تصاویر را به مقدار منفی تنظیم کنیم.
مثال:
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 20px;
margin: 15px;
background-color: #86f00e;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 5px;
}
.tutimg2 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin-left: -5px; /* تنظیم مقدار margin-left به مقدار منفی */
margin-right: 5px;
}
.tutimg3 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 5px;
}
</style>
</head>
<body>
<div>
<p><img class="tutimg1" src="images/tutimg.png" />There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary.<img class="tutimg2" src="images/tutimg.png" />Lorem Ipsum is simply
dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long
established fact that a reader will be distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
using 'Content here, content here', making it look like readable English.<img class="tutimg3" src="images/tutimg.png" />
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text.you need to be sure there isn't anything embarrassing hidden in the middle
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text. All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary.Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>در این مثال:
- تصویر اول با استفاده از کلاس
tutimg1به سمت چپ شناور شده و margin مثبتی دارد. - تصویر دوم با استفاده از کلاس
tutimg2به سمت چپ شناور شده و margin-left به مقدار منفی و margin-right به مقدار مثبت دارد، که باعث همپوشانی تصویر دوم با تصویر اول می‌شود. - تصویر سوم با استفاده از کلاس
tutimg3به سمت چپ شناور شده و margin مثبتی دارد.
Images Not Adjacent
در این بخش، می‌خواهیم دو تصویر را درون یک محتوا قرار دهیم به گونه‌ای که تصویر اول در لبه چپ محتوا قرار گیرد و تصویر دوم به راست آن ولی بدون همپوشانی با تصویر اول قرار گیرد.
مثال:
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 20px;
margin: 15px;
width: 600px;
background-color: #86f00e;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 320px;
height: 150px;
margin-right: 5px;
}
.tutimg2 {
float: right;
border: 3px solid #f0610e;
width: 320px;
height: 150px;
margin-left: 5px;
}
</style>
</head>
<body>
<div>
<p><img class="tutimg1" src="images/tutimg.png" />There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. <img class="tutimg2" src="images/tutimg.png" />Lorem Ipsum is simply
dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long
established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</p>
</div>
</body>
</html>در این مثال:
- تصویر اول با استفاده از کلاس
tutimg1به سمت چپ شناور شده و margin-right مثبتی دارد. - تصویر دوم با استفاده از کلاس
tutimg2به سمت راست شناور شده و margin-left مثبتی دارد، که باعث ماندن فاصله‌ای مناسب بین دو تصویر می‌شود.
Float Below Their Predecessors
در این بخش، می‌خواهیم یک تصویر را زیر تصویر قبلی خود قرار دهیم با تنظیم مارجین منفی برای تصویر.
مثال:
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 10px;
background-color: #86f00e;
}
.tutimg {
float: none;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin-right: 5px;
}
.tutimg2 {
float: left;
border: 3px solid #f0610e;
width: 200px;
height: 80px;
margin-top: -5px; /* تنظیم مارجین منفی */
margin-right: 5px;
}
.tutimg3 {
float: right;
border: 3px solid #f0610e;
width: 100px;
height: 120px;
margin: 5px;
}
</style>
</head>
<body>
<div>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text.<img class="tutimg1" src="images/tutimg.png" />you need to be sure there isn't anything embarrassing
hidden in the middle. All the Lorem Ip generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.making this the first true generator on the Internet of
text.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages. <img class="tutimg2" src="images/tutimg.png" /> <img class="tutimg3" src="images/tutimg.png" />
All the Lorem Ipsum 2enerators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.Contrary
to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure
Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical
literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de
</p>
</div>
</body>
</html>در این مثال:
- تصویر دوم با کلاس
tutimg2با استفاده ازfloat: left;شناور شده و مارجین بالایی منفی دارد (margin-top: -5px;) تا زیر تصویر قبلی قرار گیرد. - مارجین بالایی منفی باعث می‌شود که تصویر دوم کمی بالاتر از تصویر اول قرار بگیرد و زیر آن قرار گیرد.
To a New Line
در این بخش، توضیح داده شده که اگر فضای کافی برای تمامی شناورها (floats) در خط فعلی وجود نداشته باشد، شناورهای باقی‌مانده به خط بعدی منتقل می‌شوند.
مثال:
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 10px;
background-color: #86f00e;
width: 40%;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
}
.tutimg2 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 100px;
}
.tutimg3 {
float: left;
border: 3px solid #f0610e;
width: 100px;
height: 60px;
}
.tutimg4 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 100px;
}
</style>
</head>
<body>
<div>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
this the first true genera tor on the Internet of text. making this the first true generator on the Internet of
going to use a passage of Lorem Ipsum.don't look even slightly believable. sure there isn't anything
<img class="tutimg1" src="images/tutimg.png" /> <img class="tutimg1" src="images/tutimg.png" />
<img class="tutimg2" src="images/tutimg.png" /> <img class="tutimg3" src="images/tutimg.png" /><img
class="tutimg1" src="images/tutimg.png" />tor on the Internet of text. making this the first true generator
on the Internet of going to use a passage of Lorem Ipsum.don't look even slightly believable.making this the first true generator
on the Internet of going to use a passage of Lorem Ipsum.don't look even slightly believable.
</p>
</div>
</body>
</html>در این مثال:
- چهار تصویر با کلاس‌های
tutimg1تاtutimg4با استفاده ازfloat: left;شناور شده‌اند. - فضای کافی برای نمایش تمامی تصاویر در یک خط وجود ندارد.
- بنابراین، تصاویری که جا نمی‌شوند، به خط بعدی منتقل می‌شوند.
Related Values
در CSS، ویژگی float برای تعیین چگونگی قرار گرفتن یک المان در محیط نمایشی استفاده می‌شود. مقادیر مختلفی برای ویژگی float وجود دارد که به شما امکان می‌دهند المان‌ها را به سمت چپ یا راست یا حتی غیر شناور کنید. در زیر، توضیحی در مورد هر یک از این مقادیر ارائه شده است:
-
none: با تنظیم float به مقدار none، المان غیر شناور می‌شود و از تاثیرات شناورسازی خارج می‌شود. -
left: با تنظیم float به مقدار left، المان به سمت چپ شناور می‌شود و المان‌های بعدی به سمت راست آن قرار می‌گیرند. -
right: با تنظیم float به مقدار right، المان به سمت راست شناور می‌شود و المان‌های بعدی به سمت چپ آن قرار می‌گیرند. -
inherit: با تنظیم float به مقدار inherit، ویژگی float از والد مستقیم المان به ارث برده می‌شود. -
initial: با تنظیم float به مقدار initial، مقدار اولیه float که در این حالت none است برای المان اعمال می‌شود.
این مقادیر به شما امکان می‌دهند تا به طور دقیق کنترل کنید چگونه المان‌ها در صفحه نمایش نمایش داده شوند و چگونه با یکدیگر تعامل کنند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام