ﻦﺷﻭﺭ ﻭ ﺢﺿﺍﻭ - CSS ﻥﺎﻣﺪﯿﭼ

فهرست مطالب

    نمایش فهرست مطالب

ﻥﺩﺮﮐ ﮎﺎﭘ

ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﻭ ،ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ float ﯽﮔﮋﯾﻭ ﺯﺍ ﯽ

ﯼﺰﯿﭼ ﻪﭼ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ clear ﯽﮔﮋﯾﻭ

ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺍﺭ ﺩﺭﺍﻮﻣ ﺯﺍ ﯽﮑﯾ ﺪﻧﺍﻮﺗ ﯽﻣ clear ﯽﮔﮋ

none

ﺖﺳﺍ ﺽﺮﻓ ﺶﯿﭘ ﻦﯾﺍ .ﺩﻮﺷ ﯽﻤﻧ ﻩﺩﺍﺩ ﻞﻫ ﺖﺳﺍﺭ ﺎﯾ ﭗﭼ ﺭﻭﺎﻨﺷ ﺮﺻﺎﻨﻋ ﺮﯾﺯ ﻪﺑ ﺮﺼﻨﻋ -

left

ﺩﻮﺷ ﯽﻣ ﻩﺩﺍﺩ ﺭﺎﺸﻓ ﭗﭼ ﺭﻭﺎﻨﺷ ﺮﺻﺎﻨﻋ ﺮﯾﺯ ﻪﺑ ﺮﺼﻨﻋ -

right

ﺩﻮﺷ ﯽﻣ ﻩﺩﺍﺩ ﺭﺎﺸﻓ ﺖﺳﺍﺭ ﺖﻤﺳ ﺭﻭﺎﻨﺷ ﺮﺻﺎﻨﻋ ﺮﯾﺯ ﻪﺑ ﺮﺼﻨﻋ -

both

ﺩﻮﺷ ﯽﻣ ﻩﺩﺍﺩ ﺭﺎﺸﻓ ﺖﺳﺍﺭ ﻭ ﭗﭼ ﺭﻭﺎﻨﺷ ﺮﺼﻨﻋ ﻭﺩ ﺮﻫ ﺮﯾﺯ ﻪﺑ ﺮﺼﻨﻋ -

inherit

ﺩﺮﺑ ﯽﻣ ﺙﺭﺍ ﻪﺑ ﺩﻮﺧ ﺪﻟﺍﻭ ﺯﺍ ﺍﺭ ﺢﺿﺍﻭ ﺭﺍﺪﻘﻣ ﺮﺼﻨﻋ -

ﺮﺼﻨﻋ ﮏﯾ ﺮﮔﺍ :ﺪﯿﻫﺩ ﺖﻘﺑﺎﻄﻣ float ﺎﺑ ﺍﺭ ﻑﺎﻔﺷ ﺪﯾﺎﺑ ،ﺎﻫﺭﻭﺎﻨﺷ ﻥﺩﺮﮐ ﮎﺎﭘ ﻡﺎﮕﻨﻫ

ﻝﺎﺜﻣ

ﻪﮐ ﺖﺳﺍ ﯽﻨﻌﻣ ﻦﯾﺍ ﻪﺑ ،ﺎﺠﻨﯾﺍ ﺭﺩ .ﺪﻨﮐ ﯽﻣ ﮎﺎﭘ ﺍﺭ ﭗﭼ ﺖﻤﺳ ﺭﻭﺎﻨﺷ ﻝﺎﺜﻣ ﻦﯾﺍ

div1 {
  float: left;
}
div2 {
  clear: left;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  padding: 10px;
  border: 3px solid red;
}

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>
</html>

clearfix ﮏﻫ

ﺍﺭ ﻥﺁ ،ﺪﺷﺎﺑ ﺮﺗﺪﻨﻠﺑ ﯼﻭﺎﺣ ﺮﺼﻨﻋ ﺯﺍ ﺭﻭﺎﻨﺷ ﺮﺼﻨﻋ ﮏﯾ ﺮﮔﺍ

Without Clearfix

With Clearfix

ﻝﺎﺜﻣ

.clearfix {
  overflow: auto;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix {
  overflow: auto;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

overflow: auto ﺎﻤﺷ ﺕﺭﻮﺻ ﻦﯾﺍ ﺮﯿﻏ ﺭﺩ) ﺪﻨﮐ ﯽﻣ ﺭﺎ

ﻝﺎﺜﻣ

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

.ﺖﺧﻮﻣﺁ ﺪﯿﻫﺍﻮﺧ ﺮﺘﺸﯿﺑ ::after ﺮﺼﻨﻋ ﻪﺒﺷ ﺩﺭﻮﻣ ﺭﺩ