ﻑﺎﻔﺷ ﻭ ﺭﻭﺎﻨﺷ - CSS ﯼﺪﻨﺑ ﺡﺮﻃ
فهرست مطالب
ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ code class="w3-codespan">float CSS> ﯽﮔﮋﯾﻭ
CSS/>ﻥﺩﺮﮐ ﮎﺎﭘ<"code class="w3-codespan> ﯽﮔﮋﯾﻭ
ﺭﻭﺎﻨﺷ ﮎﻼﻣﺍ
ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ float ﯽﮔﮋﯾﻭ ﺯﺍ
ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺍﺭ ﺩﺭﺍﻮﻣ ﻦﯾﺍ ﺯﺍ ﯽﮑﯾ ﺪﻧﺍﻮﺗ ﯽﻣ float
leftﺖﺳﺍ ﺭﻭﺎﻨﺷ ﺩﻮﺧ ﻑﺮﻇ ﭗﭼ ﺖﻤﺳ ﺭﺩ ﺮﺼﻨﻋ -
rightﺩﻮﺷ ﯽﻣ ﺭﻭﺎﻨﺷ ﺩﻮﺧ ﻑﺮﻇ ﺖﺳﺍﺭ ﺖﻤﺳ ﺭﺩ ﺮﺼﻨﻋ -
noneﺖﺳﺍ ﺽﺮﻓ ﺶﯿﭘ ﻦﯾﺍ .(ﺩﻮﺷ ﯽﻣ ﻩﺩﺍﺩ ﺶﯾﺎﻤﻧ ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﻦﺘﻣ ﺭﺩ ﻪﮐ ﯽﯾﺎﺟ ﺭﺩ) ﺩﻮﺷ ﯽﻤﻧ ﺭﻭﺎﻨﺷ
inheritﺩﺮﺑ ﯽﻣ ﺙﺭﺍ ﻪﺑ ﺍﺭ ﺩﻮﺧ ﺪﻟﺍﻭ ﺭﻭﺎﻨﺷ ﺭﺍﺪﻘﻣ ﺮﺼﻨﻋ -
.ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺮﯾﻭﺎﺼﺗ ﻑﺍﺮﻃﺍ ﺭﺩ ﻦﺘﻣ ﻥﺩﺍﺩ ﺭﺍﺮﻗ ﯼﺍﺮﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ :ﺪﺷﺎﺑ ﺭﻭﺎﻨﺷ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﺑ ﻦﺘﻣ ﮏﯾ ﺭﺩ ﺪﯾﺎﺑ ﺮﯾﻮﺼﺗ ﮏﯾ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ :ﺪﺷﺎﺑ ﺭﻭﺎﻨﺷ ﭗﭼ ﺖﻤﺳ ﻪﺑ ﻦﺘﻣ ﮏﯾ ﺭﺩ ﺪﯾﺎﺑ ﺮﯾﻮﺼﺗ ﮏﯾ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ ﺩﻮﺷ ﯽﻣ ﻩﺩﺍﺩ ﺶﯾﺎﻤﻧ ﺩﺭﺍﺩ ﺭﺍﺮﻗ ﻥﺁ ﺭﺩ ﻪﮐ ﯽﯾﺎﺟ ﺭﺩ ﺎًﻘﯿﻗﺩ ﺮﯾﻮﺼﺗ ﺮﯾﺯ ﻝﺎﺜﻣ ﺭﺩ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ ﺎﻣ ﺮﮔﺍ ،ﻝﺎﺣ ﻦﯾﺍ ﺎﺑ .ﺪﻧﻮﺷ ﯽﻣ ﻩﺩﺍﺩ ﺶﯾﺎﻤﻧ ﻢﻫ ﯼﻭﺭ div ﺮﺻﺎﻨﻋ ﻝﻮﻤﻌﻣ ﺭﻮﻃ ﻪﺑ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ ;ﺖﺳﺍﺭ ﺖﻤﺳ :ﺭﻭﺎﻨﺷ - ﻝﺎﺜﻣ
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. ﻝﺎﺜﻣ
img {
float: right;
}<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<h2>Float Right</h2>
<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>
<p><img src="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 in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>
;ﭗﭼ :ﺭﻭﺎﻨﺷ - ﻝﺎﺜﻣ
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. ﻝﺎﺜﻣ
img {
float: left;
}<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<h2>Float Left</h2>
<p>In this example, the image will float to the left in the paragraph, and the text in the paragraph will wrap around the image.</p>
<p><img src="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 in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>
ﺭﻭﺎﻨﺷ ﻥﻭﺪﺑ - ﻝﺎﺜﻣ
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. ﻝﺎﺜﻣ
img {
float: none;
}<!DOCTYPE html>
<html>
<head>
<style>
img {
float: none;
}
</style>
</head>
<body>
<h2>Float None</h2>
<p>In this example, the image will be displayed just where it occurs in the text (float: none;).</p>
<p><img src="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 in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>
ﺮﮕﯾﺪﮑﯾ ﺭﺎﻨﮐ ﺭﺩ ﺭﻭﺎﻨﺷ - ﻝﺎﺜﻣ
ﻝﺎﺜﻣ
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}<!DOCTYPE html>
<html>
<head>
<style>
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
</style>
</head>
<body>
<h2>Float Next To Each Other</h2>
<p>In this example, the three divs will float next to each other.</p>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</body>
</html>